Tips (Total 3)
# Tips-1) How to build a HTML Admin Responsive Dashboard
Let's go following
Full Template Code
index.html
Example:
HTML
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="192x192" href="https://horje.com/assets/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://horje.com/assets/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://horje.com/assets/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://horje.com/assets/icon/favicon-16x16.png">
<title>Responsive Dashboard</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://morrisjs.github.io/morris.js/css/morris.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:500,600|Ubuntu:400,700');
:focus {
outline: none;
}
html{
height:100%;
}
body{
font-family: 'Ubuntu', sans-serif;
min-height: 100%;
}
.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.wrap{
margin-top: 60px;
}
/*-----Side navigation bar-----*/
.side-menu {
position: fixed;
width: 250px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
transition: all 0.5s ease-in-out;
height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
margin-right: -1px;
transition: all 0.4s ease-in;
color: #337ab7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
}
.side-menu .navbar-nav li a {
padding: 10px 25px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/*-----Side body-----*/
.side-body {
margin-left: 260px;
margin-bottom: 60px;
transition: all 0.5s ease-in-out;
}
.side-footer{
margin-left: 260px;
transition: all 0.5s ease-in-out;
}
/*-----Navbar-----*/
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
background-color: #e7e7e7;
margin-right: -1px;
color: #337ab7;
transition: all 0.2s ease-in
}
.navbar-right .dropdown-menu{
right:0;
left:auto;
}
.navbar-nav{
margin:0;
}
.nav>li{
float:left;
}
.nav>li>a{
padding: 12px;
}
.navbar-right .fa-fw {
border: 1px solid;
width: 35px;
border-radius: 50%;
height: 35px;
line-height: 35px;
color: #fff;
}
.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-alerts{
width:310px;
}
.dropdown-tasks .progress{
margin-bottom:0;
}
.dropdown-alerts li div{
line-height: 35px;
}
.dropdown-menu>li>a{
white-space: normal;
}
.bell .fa-fw{ background-color: #FF5722;}
.task .fa-fw{ background-color: #337ab7;}
.user .fa-fw{ background-color: #FFC107;}
.envelope .fa-fw{ background-color: #4CAF50;}
/*-----Side navigation bar (extra)-----*/
.panel-heading{
color:#fff;
}
.off{
transform: translate(-300px);
}
.full-width{
margin-left: 10px;
}
.menu{
padding: 6px 12px;
margin: 12px;
}
.img-resize{
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid #000;
}
header{
height: 60px;
background-color: #f8f8f8;
padding: 0;
border-bottom: 1px solid #e7e7e7;
}
.logo{
background-color: #337ab7;
width:250px;
height:60px;
line-height: 60px;
transition: all 0.5s ease-in;
}
.logo span{
color:#fff;
font-size: 18px;
}
.huge{
font-size: 50px;
}
/*-----Dashboard panels-----*/
.panel-primary .panel-footer span{ color: #337ab7 }
.panel-primary .panel-footer:hover { background-color: #337ab7; transition: all 0.2s ease-in }
.panel-primary .panel-footer:hover span { color: #fff }
.panel-green { border:1px solid #4CAF50; }
.panel-green .panel-heading{ border:1px solid #4CAF50; background-color: #4CAF50 }
.panel-green .panel-footer span{ color: #4CAF50 }
.panel-green .panel-footer:hover { background-color: #4CAF50; transition: all 0.2s ease-in }
.panel-green .panel-footer:hover span { color: #fff }
.panel-red { border:1px solid #FF5722; }
.panel-red .panel-heading{ border:1px solid #FF5722; background-color: #FF5722 }
.panel-red .panel-footer span{ color: #FF5722 }
.panel-red .panel-footer:hover { background-color: #FF5722; transition: all 0.2s ease-in }
.panel-red .panel-footer:hover span { color: #fff }
.panel-yellow { border:1px solid #FFC107; }
.panel-yellow .panel-heading{ border:1px solid #FFC107; background-color: #FFC107 }
.panel-yellow .panel-footer span{ color: #FFC107 }
.panel-yellow .panel-footer:hover { background-color: #FFC107; transition: all 0.2s ease-in }
.panel-yellow .panel-footer:hover span { color: #fff }
/*-----Breadcrumbs-----*/
.page-title-box{
border-bottom: 1px solid #337ab7;
margin-bottom: 30px;
}
.breadcrumb{
margin-top: 14px;
margin-bottom: 0;
background-color: transparent;
}
/*-----List Group-----*/
.list-group {
height: 206px;
overflow: auto;
}
/*-----Data Tables-----*/
table th{
white-space: nowrap;
}
/*-----Extra classes-----*/
.marr20{
margin-right: 20px;
}
.padd20{
padding:20px;
}
.footer{
background-color: #ccc;
padding:5px;
}
::-webkit-scrollbar,{
width:5px;
}
::-webkit-scrollbar-track {
background-color: #337ab7;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-button {
background-color: #d9edf7;
}
::-webkit-scrollbar-corner {
background-color: black;
}
/*-----Media classes-----*/
@media (max-width: 768px){
.navbar-right li:nth-child(n){
display:none;
}
.navbar-right li:last-child{
display: block;
}
.side-menu{
margin-left:-250px;
z-index: 999;
}
.side-body{
margin-left: 0;
}
.off {
z-index: 999;
transform: translate(250px);
}
.side-footer{
margin-left: 0;
}
.logo{
width:195px;
}
.logo img{
width:90%;
}
.marr20 {
margin-right: 0px;
}
}
@media (max-width: 400px) and (min-width: 290px){
.logo{
width: 150px;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="">
<header class="navbar-fixed-top">
<div class="row">
<div class="container-fluid">
<div class="pull-left">
<div class="pull-left logo text-center">
<span>LOGO</span>
</div><button class="btn btn-primary menu"><span class="glyphicon glyphicon glyphicon-menu-hamburger"></span></button>
</div>
<div class="pull-right">
<div class="marr20">
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown task">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i class="fa fa-tasks fa-fw"></i>
<i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p><strong>Task 1</strong> <span class="pull-right text-muted">40% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 2</strong> <span class="pull-right text-muted">20% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar progress-bar-info" role="progressbar" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 3</strong> <span class="pull-right text-muted">60% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" class="progress-bar progress-bar-warning" role="progressbar" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p><strong>Task 4</strong> <span class="pull-right text-muted">80% Complete</span></p>
<div class="progress progress-striped active">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" class="progress-bar progress-bar-danger" role="progressbar" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div></a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#"><strong>See All Tasks</strong> <i class="fa fa-angle-right"></i></a>
</li>
</ul><!-- /.dropdown-tasks -->
</li><!-- /.dropdown -->
<li class="dropdown bell">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers <span class="pull-right text-muted small">12 minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task <span class="pull-right text-muted small">4 minutes
ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted <span class="pull-right text-muted small">4
minutes ago</span>
</div></a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#"><strong>See All Alerts</strong> <i class="fa fa-angle-right"></i></a>
</li>
</ul><!-- /.dropdown-alerts -->
</li><!-- /.dropdown -->
<li class="dropdown user">
<a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
</li>
<li>
<a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
</li>
</ul><!-- /.dropdown-user -->
</li><!-- /.dropdown -->
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="wrap">
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div class="brand-wrapper">
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">Navigation Menu</a>
</div><a class="btn btn-default collapsed" data-toggle="collapse" href="#search" id="search-trigger" aria-expanded="false"><span class="glyphicon glyphicon-search"></span></a>
<div class="panel-collapse collapse" id="search" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-ok"></span></button>
</form>
</div>
</div>
</div>
</div><!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li>
<a href="#"><span class="glyphicon glyphicon-send"></span> Dashboard</a>
</li>
<li class="active">
<a href="#"><span class="glyphicon glyphicon-plane"></span> Active Link</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-cloud"></span> Icon Description</a>
</li><!-- Dropdown-->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1"><span class="glyphicon glyphicon-user"></span> Sub
Level <span class="caret"></span></a> <!-- Dropdown level 1 -->
<div class="panel-collapse collapse" id="dropdown-lvl1">
<div class="panel-body">
<ul class="nav navbar-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li><!-- Dropdown level 2 -->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl2"><span class="glyphicon glyphicon-off"></span>
Sub Level <span class="caret"></span></a>
<div class="panel-collapse collapse" id="dropdown-lvl2">
<div class="panel-body">
<ul class="nav navbar-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- Main Content -->
<div class="container-fluid">
<div class="side-body">
<div class="page-title-box">
<h3 class="page-title pull-left">Dashboard</h3>
<ol class="breadcrumb pull-right">
<li>
<a href="#">home</a>
</li>
<li class="active">Dashboard</li>
</ol>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-lg-8 col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
09
</div>
<div>
New Clients!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-cogs fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
612
</div>
<div>
New Deals!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-laptop fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
2148
</div>
<div>
Total Sales!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-9">
<div class="huge">
$56M
</div>
<div>
Total Income!
</div>
</div>
<div class="col-xs-3 text-right">
<i class="fa fa-dollar fa-5x"></i>
</div>
</div>
</div><a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span> <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> Notifications Panel
</div>
<div class="panel-body">
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-comment fa-fw"></i> New Comment <span class="pull-right text-muted small"><em>14 minutes ago</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-tasks fa-fw"></i> New Task <span class="pull-right text-muted small"><em>55
minutes ago</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-upload fa-fw"></i>
Server Rebooted <span class="pull-right text-muted small"><em>55 minutes ago</em></span></a>
<a class="list-group-item" href="#"><i class="fa fa-bolt fa-fw"></i> Server Crashed! <span class="pull-right text-muted small"><em>3:33 PM</em></span></a> <a class="list-group-item" href="#"><i class="fa fa-warning fa-fw"></i> Server Not Responding <span class="pull-right text-muted small"><em>10:57 AM</em></span></a>
</div><a class="btn btn-info btn-block" href="#">View All Alerts</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-line-chart fa-fw"></i> Browser Usage (5 Years)
</div>
<p class="padd20">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div id="line-chart" style="height:250px;"></div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-pie-chart fa-fw"></i> Project Task Details
</div>
<p class="padd20">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div id="donut-chart" style="height:250px"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-warning">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-fw"></i> Browser Usage Details
</div>
<div id="bar-chart" style="height:200px"></div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-success">
<div class="panel-heading">
<i class="fa fa-table fa-fw"></i> Table Details
</div>
<div class="table-responsive">
<table class="table table-striped" id="example">
<tbody><tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
<th>Heading 5</th>
<th>Heading 6</th>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
</div>
<div class="side-footer">
<div class="footer text-center">
Designed By <a target="_blank" href="https://www.linkedin.com/in/peeyush200/"> Peeyush </a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script id="rendered-js">
var data = [
{ year: '2012', a: 24.6, b: 30.9, c: 24.8 },
{ year: '2013', a: 30.0, b: 27.5, c: 20.0 },
{ year: '2014', a: 34.2, b: 20.3, c: 18.3 },
{ year: '2015', a: 43.0, b: 17.2, c: 15.1 },
{ year: '2016', a: 47.3, b: 12.3, c: 11.4 }],
config = {
lineColors: ['#337ab7', '#FF5722', '#4CAF50'],
barColors: ['#337ab7', '#FF5722', '#4CAF50'],
data: data,
xkey: 'year',
ykeys: ['a', 'b', 'c'],
labels: ['Google Chrome', 'Internet explorer', 'Mozilla firefox'] };
config.element = 'line-chart';
Morris.Line(config);
config.element = 'bar-chart';
Morris.Bar(config);
Morris.Donut({
element: 'donut-chart',
colors: ["#337ab7", "#4CAF50", "#FFC107", "#FF5722", "#5bc0de"],
data: [
{ label: "Complete", value: 15 },
{ label: "Active", value: 35 },
{ label: "Pending", value: 25 },
{ label: "Re-open", value: 10 },
{ label: "New", value: 15 }] });
$(function () {
$('button').click(function () {
$('.side-menu').toggleClass('off');
$('.side-body').toggleClass('full-width');
$('.side-footer').toggleClass('full-width');
});
});
//# sourceURL=pen.js
</script>
</body></html>
Output should be:
# Tips-2) How to create tailwindcss responsive dashboard layout
Following has full code example of tailwindcss responsive dashboard layout
Full Code Example
index.html
Example:
HTML
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="32x32" href="https://horje.com/assets/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://horje.com/assets/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://horje.com/assets/icon/favicon-16x16.png">
<title>tailwindcss responsive dashboard layout</title>
<link rel="canonical" href="https://codepen.io/A_kamel/pen/wvzzGjG">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.1/tailwind.min.css">
<style>
[x-cloak] { display: none; }
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div>
<div class="flex h-screen overflow-y-hidden bg-white" x-data="setup()" x-init="$refs.loading.classList.add('hidden')">
<!-- Loading screen -->
<div x-ref="loading" class="fixed inset-0 z-50 flex items-center justify-center text-white bg-black bg-opacity-50 hidden" style="backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px)">
Loading.....
</div>
<!-- Sidebar backdrop -->
<div x-show.in.out.opacity="isSidebarOpen" class="fixed inset-0 z-10 bg-black bg-opacity-20 lg:hidden" style="display: none;"></div>
<!-- Sidebar -->
<aside x-transition:enter="transition transform duration-300" x-transition:enter-start="-translate-x-full opacity-30 ease-in" x-transition:enter-end="translate-x-0 opacity-100 ease-out" x-transition:leave="transition transform duration-300" x-transition:leave-start="translate-x-0 opacity-100 ease-out" x-transition:leave-end="-translate-x-full opacity-0 ease-in" class="fixed inset-y-0 z-10 flex flex-col flex-shrink-0 w-64 max-h-screen overflow-hidden transition-all transform bg-white border-r shadow-lg lg:z-auto lg:static lg:shadow-none -translate-x-full lg:translate-x-0 lg:w-20" :class="{'-translate-x-full lg:translate-x-0 lg:w-20': !isSidebarOpen}">
<!-- sidebar header -->
<div class="flex items-center justify-between flex-shrink-0 p-2 lg:justify-center" :class="{'lg:justify-center': !isSidebarOpen}">
<span class="p-2 text-xl font-semibold leading-8 tracking-wider uppercase whitespace-nowrap">
K<span :class="{'lg:hidden': !isSidebarOpen}" class="lg:hidden">-WD</span>
</span>
<button @click="toggleSidbarMenu()" class="p-2 rounded-md lg:hidden">
<svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Sidebar links -->
<nav class="flex-1 overflow-hidden hover:overflow-y-auto">
<ul class="p-2 overflow-hidden">
<li>
<a href="#" class="flex items-center p-2 space-x-2 rounded-md hover:bg-gray-100 justify-center" :class="{'justify-center': !isSidebarOpen}">
<span>
<svg class="w-6 h-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</span>
<span :class="{ 'lg:hidden': !isSidebarOpen }" class="lg:hidden">Dashboard</span>
</a>
</li>
<!-- Sidebar Links... -->
</ul>
</nav>
<!-- Sidebar footer -->
<div class="flex-shrink-0 p-2 border-t max-h-14">
<button class="flex items-center justify-center w-full px-4 py-2 space-x-1 font-medium tracking-wider uppercase bg-gray-100 border rounded-md focus:outline-none focus:ring">
<span>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
</span>
<span :class="{'lg:hidden': !isSidebarOpen}" class="lg:hidden"> Logout </span>
</button>
</div>
</aside>
<div class="flex flex-col flex-1 h-full overflow-hidden">
<!-- Navbar -->
<header class="flex-shrink-0 border-b">
<div class="flex items-center justify-between p-2">
<!-- Navbar left -->
<div class="flex items-center space-x-3">
<span class="p-2 text-xl font-semibold tracking-wider uppercase lg:hidden">K-WD</span>
<!-- Toggle sidebar button -->
<button @click="toggleSidbarMenu()" class="p-2 rounded-md focus:outline-none focus:ring">
<svg class="w-4 h-4 text-gray-600" :class="{'transform transition-transform -rotate-180': isSidebarOpen}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
</svg>
</button>
</div>
<!-- Mobile search box -->
<div x-show.transition="isSearchBoxOpen" class="fixed inset-0 z-10 bg-black bg-opacity-20" style="display: none;">
<div @click.away="isSearchBoxOpen = false" class="absolute inset-x-0 flex items-center justify-between p-2 bg-white shadow-md">
<div class="flex items-center flex-1 px-2 space-x-2">
<!-- search icon -->
<span>
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</span>
<input type="text" placeholder="Search" class="w-full px-4 py-3 text-gray-600 rounded-md focus:bg-gray-100 focus:outline-none">
</div>
<!-- close button -->
<button @click="isSearchBoxOpen = false" class="flex-shrink-0 p-4 rounded-md">
<svg class="w-4 h-4 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Desktop search box -->
<div class="items-center hidden px-2 space-x-2 md:flex-1 md:flex md:mr-auto md:ml-5">
<!-- search icon -->
<span>
<svg class="w-5 h-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</span>
<input type="text" placeholder="Search" class="px-4 py-3 rounded-md hover:bg-gray-100 lg:max-w-sm md:py-2 md:flex-1 focus:outline-none md:focus:bg-gray-100 md:focus:shadow md:focus:border">
</div>
<!-- Navbar right -->
<div class="relative flex items-center space-x-3">
<!-- Search button -->
<button @click="isSearchBoxOpen = true" class="p-2 bg-gray-100 rounded-full md:hidden focus:outline-none focus:ring hover:bg-gray-200">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</button>
<div class="items-center hidden space-x-3 md:flex">
<!-- Notification Button -->
<div class="relative" x-data="{ isOpen: false }">
<!-- red dot -->
<div class="absolute right-0 p-1 bg-red-400 rounded-full animate-ping"></div>
<div class="absolute right-0 p-1 bg-red-400 border rounded-full"></div>
<button @click="isOpen = !isOpen" class="p-2 bg-gray-100 rounded-full hover:bg-gray-200 focus:outline-none focus:ring">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</button>
<!-- Dropdown card -->
<div @click.away="isOpen = false" x-show.transition.opacity="isOpen" class="absolute w-48 max-w-md mt-3 transform bg-white rounded-md shadow-lg -translate-x-3/4 min-w-max" style="display: none;">
<div class="p-4 font-medium border-b">
<span class="text-gray-800">Notification</span>
</div>
<ul class="flex flex-col p-2 my-2 space-y-1">
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Link</a>
</li>
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Another Link</a>
</li>
</ul>
<div class="flex items-center justify-center p-4 text-blue-700 underline border-t">
<a href="#">See All</a>
</div>
</div>
</div>
<!-- Services Button -->
<div x-data="{ isOpen: false }">
<button @click="isOpen = !isOpen" class="p-2 bg-gray-100 rounded-full hover:bg-gray-200 focus:outline-none focus:ring">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
</button>
<!-- Dropdown -->
<div @click.away="isOpen = false" @keydown.escape="isOpen = false" x-show.transition.opacity="isOpen" class="absolute mt-3 transform bg-white rounded-md shadow-lg -translate-x-3/4 min-w-max" style="display: none;">
<div class="p-4 text-lg font-medium border-b">Web apps & services</div>
<ul class="flex flex-col p-2 my-3 space-y-3">
<li>
<a href="#" class="flex items-start px-2 py-1 space-x-2 rounded-md hover:bg-gray-100">
<span class="block mt-1">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
</svg>
</span>
<span class="flex flex-col">
<span class="text-lg">Atlassian</span>
<span class="text-sm text-gray-400">Lorem ipsum dolor sit.</span>
</span>
</a>
</li>
<li>
<a href="#" class="flex items-start px-2 py-1 space-x-2 rounded-md hover:bg-gray-100">
<span class="block mt-1">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
</svg>
</span>
<span class="flex flex-col">
<span class="text-lg">Slack</span>
<span class="text-sm text-gray-400">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>
</span>
</a>
</li>
</ul>
<div class="flex items-center justify-center p-4 text-blue-700 underline border-t">
<a href="#">Show all apps</a>
</div>
</div>
</div>
<!-- Options Button -->
<div class="relative" x-data="{ isOpen: false }">
<button @click="isOpen = !isOpen" class="p-2 bg-gray-100 rounded-full hover:bg-gray-200 focus:outline-none focus:ring">
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
<!-- Dropdown card -->
<div @click.away="isOpen = false" x-show.transition.opacity="isOpen" class="absolute w-40 max-w-sm mt-3 transform bg-white rounded-md shadow-lg -translate-x-3/4 min-w-max" style="display: none;">
<div class="p-4 font-medium border-b">
<span class="text-gray-800">Options</span>
</div>
<ul class="flex flex-col p-2 my-2 space-y-1">
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Link</a>
</li>
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Another Link</a>
</li>
</ul>
<div class="flex items-center justify-center p-4 text-blue-700 underline border-t">
<a href="#">See All</a>
</div>
</div>
</div>
</div>
<!-- avatar button -->
<div class="relative" x-data="{ isOpen: false }">
<button @click="isOpen = !isOpen" class="p-1 bg-gray-200 rounded-full focus:outline-none focus:ring">
<img class="object-cover w-8 h-8 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="Ahmed Kamel">
</button>
<!-- green dot -->
<div class="absolute right-0 p-1 bg-green-400 rounded-full bottom-3 animate-ping"></div>
<div class="absolute right-0 p-1 bg-green-400 border border-white rounded-full bottom-3"></div>
<!-- Dropdown card -->
<div @click.away="isOpen = false" x-show.transition.opacity="isOpen" class="absolute mt-3 transform -translate-x-full bg-white rounded-md shadow-lg min-w-max" style="display: none;">
<div class="flex flex-col p-4 space-y-1 font-medium border-b">
<span class="text-gray-800">Ahmed Kamel</span>
<span class="text-sm text-gray-400">[email protected]</span>
</div>
<ul class="flex flex-col p-2 my-2 space-y-1">
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Link</a>
</li>
<li>
<a href="#" class="block px-2 py-1 transition rounded-md hover:bg-gray-100">Another Link</a>
</li>
</ul>
<div class="flex items-center justify-center p-4 text-blue-700 underline border-t">
<a href="#">Logout</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Main content -->
<main class="flex-1 max-h-full p-5 overflow-hidden overflow-y-scroll">
<!-- Main content header -->
<div class="flex flex-col items-start justify-between pb-6 space-y-4 border-b lg:items-center lg:space-y-0 lg:flex-row">
<h1 class="text-2xl font-semibold whitespace-nowrap">Dashboard</h1>
<div class="space-y-6 md:space-x-2 md:space-y-0">
<a href="https://github.com/Kamona-WD/starter-dashboard-layout" target="_blank" class="inline-flex items-center justify-center px-4 py-1 space-x-1 bg-gray-200 rounded-md shadow hover:bg-opacity-20">
<span>
<svg class="w-4 h-4 text-gray-500" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</span>
<span>View on Github</span>
</a>
<a href="https://kamona-wd.github.io/kwd-dashboard/" target="_blank" class="inline-flex items-center justify-center px-4 py-1 space-x-1 bg-red-500 text-white rounded-md shadow animate-bounce hover:bg-red-600">
<span>See Dark & Light version</span>
</a>
</div>
</div>
<!-- Start Content -->
<div class="grid grid-cols-1 gap-5 mt-6 sm:grid-cols-2 lg:grid-cols-4">
<template x-for="i in 4" :key="i">
<div class="p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg">
<div class="flex items-start justify-between">
<div class="flex flex-col space-y-2">
<span class="text-gray-400">Total Users</span>
<span class="text-lg font-semibold">100,221</span>
</div>
<div class="p-10 bg-gray-200 rounded-md"></div>
</div>
<div>
<span class="inline-block px-2 text-sm text-white bg-green-300 rounded">14%</span>
<span>from 2019</span>
</div>
</div>
</template>
<div class="p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg">
<div class="flex items-start justify-between">
<div class="flex flex-col space-y-2">
<span class="text-gray-400">Total Users</span>
<span class="text-lg font-semibold">100,221</span>
</div>
<div class="p-10 bg-gray-200 rounded-md"></div>
</div>
<div>
<span class="inline-block px-2 text-sm text-white bg-green-300 rounded">14%</span>
<span>from 2019</span>
</div>
</div>
<div class="p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg">
<div class="flex items-start justify-between">
<div class="flex flex-col space-y-2">
<span class="text-gray-400">Total Users</span>
<span class="text-lg font-semibold">100,221</span>
</div>
<div class="p-10 bg-gray-200 rounded-md"></div>
</div>
<div>
<span class="inline-block px-2 text-sm text-white bg-green-300 rounded">14%</span>
<span>from 2019</span>
</div>
</div>
<div class="p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg">
<div class="flex items-start justify-between">
<div class="flex flex-col space-y-2">
<span class="text-gray-400">Total Users</span>
<span class="text-lg font-semibold">100,221</span>
</div>
<div class="p-10 bg-gray-200 rounded-md"></div>
</div>
<div>
<span class="inline-block px-2 text-sm text-white bg-green-300 rounded">14%</span>
<span>from 2019</span>
</div>
</div>
<div class="p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg">
<div class="flex items-start justify-between">
<div class="flex flex-col space-y-2">
<span class="text-gray-400">Total Users</span>
<span class="text-lg font-semibold">100,221</span>
</div>
<div class="p-10 bg-gray-200 rounded-md"></div>
</div>
<div>
<span class="inline-block px-2 text-sm text-white bg-green-300 rounded">14%</span>
<span>from 2019</span>
</div>
</div>
</div>
<!-- Table see (https://tailwindui.com/components/application-ui/lists/tables) -->
<h3 class="mt-6 text-xl">Users</h3>
<div class="flex flex-col mt-6">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div class="overflow-hidden border-b border-gray-200 rounded-md shadow-md">
<table class="min-w-full overflow-x-scroll divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
Name
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
Title
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
Status
</th>
<th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">
Role
</th>
<th scope="col" class="relative px-6 py-3">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<template x-for="i in 10" :key="i">
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
</template>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
<tr class="transition-all hover:bg-gray-100 hover:shadow-lg">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-10 h-10 rounded-full" src="https://avatars0.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ahmed Kamel</div>
<div class="text-sm text-gray-500">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">Regional Paradigm Technician</div>
<div class="text-sm text-gray-500">Optimization</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
Active
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">Admin</td>
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
<a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<!-- Main footer -->
<footer class="flex items-center justify-between flex-shrink-0 p-4 border-t max-h-14">
<div>K-WD © 2020</div>
<div class="text-sm">
Made by
<a class="text-blue-400 underline" href="https://github.com/Kamona-WD" target="_blank" rel="noopener noreferrer">Ahmed Kamel</a>
</div>
<div>
<!-- Github svg -->
<a href="https://github.com/Kamona-WD/starter-dashboard-layout" target="_blank" class="flex items-center space-x-1">
<svg class="w-6 h-6 text-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
<span class="hidden text-sm md:block">View on Github</span>
</a>
</div>
</footer>
</div>
<!-- Setting panel button -->
<div>
<button @click="isSettingsPanelOpen = true" class="fixed right-0 px-4 py-2 text-sm font-medium text-white uppercase transform rotate-90 translate-x-8 bg-gray-600 top-1/2 rounded-b-md">
Settings
</button>
</div>
<!-- Settings panel -->
<div x-show="isSettingsPanelOpen" @click.away="isSettingsPanelOpen = false" x-transition:enter="transition transform duration-300" x-transition:enter-start="translate-x-full opacity-30 ease-in" x-transition:enter-end="translate-x-0 opacity-100 ease-out" x-transition:leave="transition transform duration-300" x-transition:leave-start="translate-x-0 opacity-100 ease-out" x-transition:leave-end="translate-x-full opacity-0 ease-in" class="fixed inset-y-0 right-0 flex flex-col bg-white shadow-lg bg-opacity-20 w-80" style="display: none;">
<div class="flex items-center justify-between flex-shrink-0 p-2">
<h6 class="p-2 text-lg">Settings</h6>
<button @click="isSettingsPanelOpen = false" class="p-2 rounded-md focus:outline-none focus:ring">
<svg class="w-6 h-6 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex-1 max-h-full p-4 overflow-hidden hover:overflow-y-scroll">
<span>Settings Content</span>
<!-- Settings Panel Content ... -->
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.7.3/alpine.js"></script>
<script id="rendered-js">
const setup = () => {
function getSidebarStateFromLocalStorage() {
// if it already there, use it
if (window.localStorage.getItem('isSidebarOpen')) {
return JSON.parse(window.localStorage.getItem('isSidebarOpen'));
}
// else return the initial state you want
return (
false);
}
function setSidebarStateToLocalStorage(value) {
window.localStorage.setItem('isSidebarOpen', value);
}
return {
loading: true,
isSidebarOpen: getSidebarStateFromLocalStorage(),
toggleSidbarMenu() {
this.isSidebarOpen = !this.isSidebarOpen;
setSidebarStateToLocalStorage(this.isSidebarOpen);
},
isSettingsPanelOpen: false,
isSearchBoxOpen: false };
};
//# sourceURL=pen.js
</script>
</body></html>
Output should be:
# Tips-3) How to create HTML Responsive Dashboard Bento Style
We have given full code following
Full Code Example of HTML Responsive Dashboard Bento Style
Try following code
index.html
Example:
HTML
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="60x60" href="https://horje.com/assets/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://horje.com/assets/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://horje.com/assets/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://horje.com/assets/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://horje.com/assets/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://horje.com/assets/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://horje.com/assets/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://horje.com/assets/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://horje.com/assets/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://horje.com/assets/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://horje.com/assets/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://horje.com/assets/icon/favicon-16x16.png">
<link rel="manifest" href="https://horje.com/assets/icon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://horje.com/assets/icon//ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>Responsive Dashboard | Bento Style</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
nav ul,
nav ul li {
outline: 0;
}
nav ul li a {
text-decoration: none;
}
body {
font-family: "Nunito", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: url(https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5baf8325-ed69-40b0-b9d2-d8c5d2bde3b0);
background-repeat: no-repeat;
background-size: cover;
/* background: #212140; */
}
/* MAIN MENU */
main {
display: grid;
grid-template-columns: 13% 87%;
min-height: 100vh;
width: 100%;
margin: 40px;
background: rgb(254, 254, 254);
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
border-radius: 15px;
z-index: 10;
}
.main-menu {
overflow: hidden;
background: rgb(73, 57, 113);
padding-top: 10px;
border-radius: 15px 0 0 15px;
font-family: "Roboto", sans-serif;
}
.main-menu h1 {
display: block;
font-size: 1.5rem;
font-weight: 500;
text-align: center;
margin: 20px 0 30px;
color: #fff;
font-family: "Nunito", sans-serif;
}
.logo {
display: none;
}
.nav-item {
position: relative;
display: block;
}
.nav-item a {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1rem;
padding: 15px 0;
margin-left: 10px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.nav-item b:nth-child(1) {
position: absolute;
top: -15px;
height: 15px;
width: 100%;
background: #fff;
display: none;
}
.nav-item b:nth-child(1)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: 20px;
background: rgb(73, 57, 113);
}
.nav-item b:nth-child(2) {
position: absolute;
bottom: -15px;
height: 15px;
width: 100%;
background: #fff;
display: none;
}
.nav-item b:nth-child(2)::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-right-radius: 20px;
background: rgb(73, 57, 113);
}
.nav-item.active b:nth-child(1),
.nav-item.active b:nth-child(2) {
display: block;
}
.nav-item.active a {
text-decoration: none;
color: #000;
background: rgb(254, 254, 254);
}
.nav-icon {
width: 60px;
height: 20px;
font-size: 20px;
text-align: center;
}
.nav-text {
display: block;
width: 120px;
height: 20px;
font-family: "Mulish", sans-serif;
}
/* CONTENT */
.content {
display: grid;
grid-template-columns: 75% 25%;
}
/* LEFT CONTENT */
.left-content {
display: grid;
grid-template-rows: 50% 50%;
background: #f6f7fb;
margin: 15px;
padding: 20px;
border-radius: 15px;
}
/* ACTIVITIES */
.activities h1 {
margin: 0 0 20px;
font-size: 1.4rem;
font-weight: 700;
}
.activity-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 150px);
column-gap: 10px;
}
.img-one {
grid-area: 1 / 1 / 2 / 2;
}
.img-two {
grid-area: 2 / 1 / 3 / 2;
}
.img-three {
display: block;
grid-area: 1 / 2 / 3 / 4;
}
.img-four {
grid-area: 1 / 4 / 2 / 5;
}
.img-five {
grid-area: 1 / 5 / 2 / 6;
}
.img-six {
display: block;
grid-area: 2 / 4 / 3 / 6;
}
.image-container {
position: relative;
margin-bottom: 10px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
border-radius: 10px;
}
.image-container img {
width: 100%;
height: 100%;
border-radius: 10px;
object-fit: cover;
}
.overlay {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
transparent,
transparent,
rgba(3, 3, 185, 0.5)
);
border-radius: 10px;
transition: all 0.6s linear;
}
.image-container:hover .overlay {
opacity: 0;
}
.overlay h3 {
margin-bottom: 8px;
margin-right: 10px;
color: #fff;
}
/* LEFT BOTTOM */
.left-bottom {
display: grid;
grid-template-columns: 55% 40%;
gap: 40px;
}
/* WEEKLY SCHEDULE */
.weekly-schedule {
display: flex;
flex-direction: column;
}
.weekly-schedule h1 {
margin-top: 20px;
font-size: 1.3rem;
font-weight: 700;
}
.calendar {
margin-top: 10px;
}
.day-and-activity {
display: grid;
grid-template-columns: 15% 60% 25%;
align-items: center;
border-radius: 14px;
margin-bottom: 5px;
color: #484d53;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
.activity-one {
background-color: rgb(124, 136, 224, 0.5);
background-image: linear-gradient(
240deg,
rgb(124, 136, 224) 0%,
#c3f4fc 100%
);
}
.activity-two {
background-color: #aee2a4a1;
background-image: linear-gradient(240deg, #e5a243ab 0%, #f7f7aa 90%);
}
.activity-three {
background-color: #ecfcc376;
background-image: linear-gradient(240deg, #97e7d1 0%, #ecfcc3 100%);
}
.activity-four {
background-color: #e6a7c3b5;
background-image: linear-gradient(240deg, #fc8ebe 0%, #fce5c3 100%);
}
.day {
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(-10px);
}
.day h1 {
font-size: 1.6rem;
font-weight: 600;
}
.day p {
text-transform: uppercase;
font-size: 0.9rem;
font-weight: 600;
transform: translateY(-3px);
}
.activity {
border-left: 3px solid #484d53;
}
.participants {
display: flex;
margin-left: 20px;
}
.participants img {
width: 28px;
height: 28px;
border-radius: 50%;
z-index: calc(2 * var(--i));
margin-left: -10px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
.activity h2 {
margin-left: 10px;
font-size: 1.25rem;
font-weight: 600;
border-radius: 12px;
}
.btn {
display: block;
padding: 8px 24px;
margin: 10px auto;
font-size: 1.1rem;
font-weight: 500;
outline: none;
text-decoration: none;
color: #484b57;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
cursor: pointer;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
animation: gelatine 0.5s 1;
}
@keyframes gelatine {
0%,
100% {
transform: scale(1, 1);
}
25% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}
/* PERSONAL BESTS */
.personal-bests {
display: block;
}
.personal-bests h1 {
margin-top: 20px;
font-size: 1.3rem;
font-weight: 700;
}
.personal-bests-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 150px);
gap: 10px;
margin-top: 10px;
}
.best-item {
display: flex;
gap: 20px;
width: 100%;
height: 100%;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
.box-one {
flex-direction: row;
align-items: center;
justify-content: center;
grid-area: 1 / 1 / 2 / 3;
background-color: rgba(185, 159, 237, 0.6);
padding: 15px;
font-size: 1rem;
font-weight: 700;
}
.box-one img {
max-width: 100px;
aspect-ratio: 4/3;
}
.box-two {
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: 0.9rem;
font-weight: 700;
padding: 10px;
grid-area: 2 / 1 / 3 / 2;
background-color: rgba(238, 184, 114, 0.6);
}
.box-two img {
max-width: 90px;
aspect-ratio: 3/2;
align-self: flex-end;
}
.box-three {
flex-direction: column;
align-items: center;
justify-content: flex-start;
font-size: 0.9rem;
font-weight: 700;
padding: 10px;
grid-area: 2 / 2 / 3 / 3;
background-color: rgba(184, 224, 192, 0.6);
}
.box-three img {
max-width: 70px;
aspect-ratio: 1/1;
align-self: flex-end;
}
/* RIGHT CONTENT */
.right-content {
display: grid;
grid-template-rows: 5% 20% 75%;
background: #f6f7fb;
margin: 15px 15px 15px 0;
padding: 10px 0;
border-radius: 15px;
}
/* USER INFO */
.user-info {
display: grid;
grid-template-columns: 30% 55% 15%;
align-items: center;
padding: 0 10px;
}
.icon-container {
display: flex;
gap: 15px;
}
.user-info h4 {
margin-left: 40px;
}
.user-info img {
width: 40px;
aspect-ratio: 1/1;
border-radius: 50%;
}
/* ACTIVE CALORIES */
.active-calories {
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(214, 227, 248);
padding: 0 10px;
margin: 15px 10px 0;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
.active-calories h1 {
margin-top: 10px;
font-size: 1.2rem;
}
.active-calories-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.calories-content p {
font-size: 1rem;
}
.calories-content p span {
font-weight: 700;
}
.box {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
padding: 10px 0;
/* width: 200px; */
}
.box h2 {
position: relative;
text-align: center;
font-size: 1.25rem;
color: rgb(91, 95, 111);
font-weight: 600;
}
.box h2 small {
font-size: 0.8rem;
font-weight: 600;
}
.circle {
position: relative;
width: 80px;
aspect-ratio: 1/1;
background: conic-gradient(
from 0deg,
#590b94 0%,
#590b94 0% var(--i),
#b3b2b2 var(--i),
#b3b2b2 100%
);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.circle::before {
content: "";
position: absolute;
inset: 10px;
background-color: rgb(214, 227, 248);
border-radius: 50%;
}
/* MOBILE PERSONAL BESTS */
.mobile-personal-bests {
display: none;
}
/* FRIEND ACTIVITIES */
.friends-activity {
display: flex;
flex-direction: column;
}
.friends-activity h1 {
font-size: 1.2rem;
font-weight: 700;
margin: 15px 0 10px 15px;
}
.card-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.card {
background-color: #fff;
margin: 0 10px;
padding: 5px 7px;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
.card-two {
display: block;
}
.card-user-info {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 5px;
}
.card-user-info img {
width: 25px;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
}
.card-user-info h2 {
font-size: 1rem;
font-weight: 700;
margin-left: 5px;
}
.card-img {
display: block;
width: 100%;
aspect-ratio: 7/4;
margin-bottom: 10px;
object-fit: cover;
border-radius: 10px;
object-position: 50% 30%;
}
.card p {
font-size: 0.9rem;
padding: 0 5px 5px;
}
@media (max-width: 1500px) {
main {
grid-template-columns: 6% 94%;
}
.main-menu h1 {
display: none;
}
.logo {
display: block;
width: 30px;
margin: 20px auto;
}
.nav-text {
display: none;
}
.content {
grid-template-columns: 70% 30%;
}
}
@media (max-width: 1310px) {
main {
grid-template-columns: 8% 92%;
margin: 30px;
}
.content {
grid-template-columns: 65% 35%;
}
.day-and-activity {
margin-bottom: 10px;
}
.btn {
padding: 8px 16px;
margin: 10px 0;
margin-right: 10px;
font-size: 1rem;
}
.personal-bests-container {
grid-template-rows: repeat(3, 98px);
gap: 15px;
}
.box-one {
flex-direction: row;
justify-content: space-between;
grid-area: 1 / 1 / 2 / 3;
padding: 10px;
font-size: 0.9rem;
}
.box-one img {
max-width: 80px;
}
.box-two {
flex-direction: row;
justify-content: space-between;
grid-area: 2 / 1 / 3 / 3;
}
.box-two img {
max-width: 70px;
align-self: center;
}
.box-three {
flex-direction: row;
justify-content: space-between;
grid-area: 3 / 1 / 4 / 3;
}
.box-three img {
max-width: 60px;
align-self: center;
}
.right-content {
grid-template-rows: 4% 20% 76%;
margin: 15px 15px 15px 0;
}
}
@media (max-width: 1150px) {
.content {
grid-template-columns: 60% 40%;
}
.left-content {
grid-template-rows: 50% 50%;
margin: 15px;
padding: 20px;
}
.btn {
padding: 8px 8px;
font-size: 0.9rem;
}
.personal-bests-container {
grid-template-rows: repeat(3, 70px);
gap: 10px;
}
.activity-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}
.img-one {
grid-area: 1 / 1 / 2 / 2;
}
.img-two {
grid-area: 2 / 1 / 3 / 2;
}
.img-three {
display: none;
}
.img-four {
grid-area: 1 / 2 / 2 / 3;
}
.img-five {
grid-area: 1 / 3 / 2 / 4;
}
.img-six {
grid-area: 2 / 2 / 3 / 4;
}
.left-bottom {
grid-template-columns: 100%;
gap: 0;
}
.right-content {
grid-template-rows: 4% 19% 36% 41%;
}
.personal-bests {
display: none;
}
.mobile-personal-bests {
display: block;
margin: 0 10px;
}
.mobile-personal-bests h1 {
margin-top: 20px;
font-size: 1.2rem;
}
.card-two {
display: none;
}
.card-img {
aspect-ratio: 16/9;
}
}
@media (max-width: 1050px) {
.right-content {
grid-template-rows: 5% 19% 36% 40%;
}
}
@media (max-width: 910px) {
main {
grid-template-columns: 10% 90%;
margin: 20px;
}
.content {
grid-template-columns: 55% 45%;
}
.left-content {
grid-template-rows: 50% 50%;
padding: 30px 20px 20px;
}
.activity-container {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 150px);
}
.img-one {
grid-area: 1 / 1 / 2 / 2;
}
.img-two {
grid-area: 2 / 1 / 3 / 2;
}
.img-three {
display: none;
}
.img-four {
grid-area: 1 / 2 / 2 / 3;
}
.img-five {
grid-area: 2 / 2 / 3 / 3;
}
.img-six {
display: none;
}
}
@media (max-width: 800px) {
.content {
grid-template-columns: 52% 48%;
}
}
@media (max-width: 700px) {
main {
grid-template-columns: 15% 85%;
}
.content {
grid-template-columns: 100%;
grid-template-rows: 45% 55%;
grid-template-areas:
"rightContent"
"leftContent";
}
.left-content {
grid-area: leftContent;
grid-template-rows: 45% 55%;
padding: 10px 20px 10px;
}
.right-content {
grid-area: rightContent;
grid-template-rows: 5% 40% 50%;
margin: 15px 15px 0 15px;
padding: 10px 0 0;
gap: 15px;
}
.activities,
.weekly-schedule {
margin-top: 10px;
}
.active-calories-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.friends-activity {
display: none;
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<main>
<nav class="main-menu">
<h1>Fitness App</h1>
<img class="logo" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/4cfdcb5a-0137-4457-8be1-6e7bd1f29ebb" alt="">
<ul>
<li class="nav-item active">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-house nav-icon"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-user nav-icon"></i>
<span class="nav-text">Profile</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-calendar-check nav-icon"></i>
<span class="nav-text">Schedule</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-person-running nav-icon"></i>
<span class="nav-text">Activities</span>
</a>
</li>
<li class="nav-item">
<b></b>
<b></b>
<a href="#">
<i class="fa fa-sliders nav-icon"></i>
<span class="nav-text">Settings</span>
</a>
</li>
</ul>
</nav>
<section class="content">
<div class="left-content">
<div class="activities">
<h1>Popular Activities</h1>
<div class="activity-container">
<div class="image-container img-one">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/467cf682-03fb-4fae-b129-5d4f5db304dd" alt="tennis">
<div class="overlay">
<h3>Tennis</h3>
</div>
</div>
<div class="image-container img-two">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3bab6a71-c842-4a50-9fed-b4ce650cb478" alt="hiking">
<div class="overlay">
<h3>Hiking</h3>
</div>
</div>
<div class="image-container img-three">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c8e88356-8df5-4ac5-9e1f-5b9e99685021" alt="running">
<div class="overlay">
<h3>Running</h3>
</div>
</div>
<div class="image-container img-four">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/69437d08-f203-4905-8cf5-05411cc28c19" alt="cycling">
<div class="overlay">
<h3>Cycling</h3>
</div>
</div>
<div class="image-container img-five">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e1a66078-1927-4828-b793-15c403d06411" alt="yoga">
<div class="overlay">
<h3>Yoga</h3>
</div>
</div>
<div class="image-container img-six">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7568e0ff-edb5-43dd-bff5-aed405fc32d9" alt="swimming">
<div class="overlay">
<h3>Swimming</h3>
</div>
</div>
</div>
</div>
<div class="left-bottom">
<div class="weekly-schedule">
<h1>Weekly Schedule</h1>
<div class="calendar">
<div class="day-and-activity activity-one">
<div class="day">
<h1>13</h1>
<p>mon</p>
</div>
<div class="activity">
<h2>Swimming</h2>
<div class="participants">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 1" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de" style="--i: 2" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" style="--i: 3" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68" style="--i: 4" alt="">
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-two">
<div class="day">
<h1>15</h1>
<p>wed</p>
</div>
<div class="activity">
<h2>Yoga</h2>
<div class="participants">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 1" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 2" alt="">
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-three">
<div class="day">
<h1>17</h1>
<p>fri</p>
</div>
<div class="activity">
<h2>Tennis</h2>
<div class="participants">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 1" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e082b965-bb88-4192-bce6-0eb8b0bf8e68" style="--i: 2" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 3" alt="">
</div>
</div>
<button class="btn">Join</button>
</div>
<div class="day-and-activity activity-four">
<div class="day">
<h1>18</h1>
<p>sat</p>
</div>
<div class="activity">
<h2>Hiking</h2>
<div class="participants">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" style="--i: 1" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/32037044-f076-433a-8a6e-9b80842f29c9" style="--i: 2" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/07d4fa6f-6559-4874-b912-3968fdfe4e5e" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/c61daa1c-5881-43f8-a50f-62be3d235daf" style="--i: 4" alt="">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/90affa88-8da0-40c8-abe7-f77ea355a9de" style="--i: 5" alt="">
</div>
</div>
<button class="btn">Join</button>
</div>
</div>
</div>
<div class="personal-bests">
<h1>Personal Bests</h1>
<div class="personal-bests-container">
<div class="best-item box-one">
<p>Fastest 5K Run: 22min</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/242bbd8c-aaf8-4aee-a3e4-e0df62d1ab27" alt="">
</div>
<div class="best-item box-two">
<p>Longest Distance Cycling: 4 miles</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a3b3cb3a-5127-498b-91cc-a1d39499164a" alt="">
</div>
<div class="best-item box-three">
<p>Longest Roller-Skating: 2 hours</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e0ee8ffb-faa8-462a-b44d-0a18c1d9604c" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="right-content">
<div class="user-info">
<div class="icon-container">
<i class="fa fa-bell nav-icon"></i>
<i class="fa fa-message nav-icon"></i>
</div>
<h4>Kelsey Miller</h4>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/40b7cce2-c289-4954-9be0-938479832a9c" alt="user">
</div>
<div class="active-calories">
<h1 style="align-self: flex-start">Active Calories</h1>
<div class="active-calories-container">
<div class="box" style="--i: 85%">
<div class="circle">
<h2>85<small>%</small></h2>
</div>
</div>
<div class="calories-content">
<p><span>Today:</span> 400</p>
<p><span>This Week:</span> 3500</p>
<p><span>This Month:</span> 14000</p>
</div>
</div>
</div>
<div class="mobile-personal-bests">
<h1>Personal Bests</h1>
<div class="personal-bests-container">
<div class="best-item box-one">
<p>Fastest 5K Run: 22min</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/05dfc444-9ed3-44cc-96af-a9cf195f5820" alt="">
</div>
<div class="best-item box-two">
<p>Longest Distance Cycling: 4 miles</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9ca170e9-1252-4fa6-8677-36493540c1f2" alt="">
</div>
<div class="best-item box-three">
<p>Longest Roller-Skating: 2 hours</p>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/262d1611-ed4c-4297-981c-480cf7f95714" alt="">
</div>
</div>
</div>
<div class="friends-activity">
<h1>Friends Activity</h1>
<div class="card-container">
<div class="card">
<div class="card-user-info">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9290037d-a5b2-4f50-aea3-9f3f2b53b441" alt="">
<h2>Jane</h2>
</div>
<img class="card-img" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/bef54506-ea45-4e42-a1b6-23a48f61c5e8" alt="">
<p>We completed the 30-Day Running Streak Challenge!????♀️????</p>
</div>
<div class="card card-two">
<div class="card-user-info">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/42616ef2-ba96-49c7-80ea-c3cf1e2ecc89" alt="">
<h2>Mike</h2>
</div>
<img class="card-img" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2dcc1b94-06c5-4c62-b886-53b9e433fd44" alt="">
<p>I just set a new record in cycling: 30 miles!????</p>
</div>
</div>
</div>
</div>
</section>
</main>
<script id="rendered-js">
const navItems = document.querySelectorAll(".nav-item");
navItems.forEach((navItem, i) => {
navItem.addEventListener("click", () => {
navItems.forEach((item, j) => {
item.className = "nav-item";
});
navItem.className = "nav-item active";
});
});
//# sourceURL=pen.js
</script>
</body></html>
Output should be:
