JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>

    <div class="container-fluid display-table">
      <div class="row display-table-row">
        <!-- side menu -->
        <div class="col-md-2 col-sm-1 hidden-xs display-table-cell valign-top" id="side-menu">
          <h1 class="hidden-xs hidden-sm">Navigation</h1>
          <ul>
            <li class="link active">
              <a href="index.html">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                <span class="hidden-sm hidden-xs">Dashboard</span>
              </a>
            </li>

            <li class="link">
              <a href="#collapse-post" data-toggle="collapse" aria-controls="collapse-post">
                <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                <span class="hidden-sm hidden-xs">Article</span>
                <span class="label label-success pull-right hidden-xs hidden-sm">20</span>
              </a>
              <ul class="collapse collapseable" id="collapse-post">
                <li><a href="new-article.html">Create New</a></li>
                <li><a href="articles.html">View Article</a></li>
              </ul>
            </li>

            <li class="link">
              <a href="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                <span class="hidden-sm hidden-xs">Comments</span>
              </a>
              <ul class="collapse collapseable" id="collapse-comments">
                <li>
                  <a href="approved.html">Approved
                    <span class="label label-success pull-right hidden-xs hidden-sm">10</span>
                  </a>
                </li>

                <li>
                  <a href="approved.html">Unapproved
                    <span class="label label-warning pull-right hidden-xs hidden-sm">10</span>
                  </a>
                </li>
              </ul>
   ...

CSS

.admin-content-con {
	margin-top: 20px;
	background-color: white;
	border-top: 4px #e7eaec solid;
	padding: 15px;
}

.dashboard-left-cell {
	padding-right: 5px;
}

.dashboard-right-cell {
	padding-left: 5px;
}

.admin-content-con header {
	margin-bottom: 20px;
	border-bottom: 1px #eee solid;
	padding-bottom: 10px;
}

.admin-content-con h5 {
	margin: 0px;
	padding-top: 3px;
}

.text-link {
	color: #676a6c;
}

.text-link:hover {
	color: #676a6c;
}

.commenter-name-dash {
	font-weight: bold;
	font-size: 13px;
}

.comment-head-dash {
	margin-bottom: 6px;
}

.comment-dash {
	margin-bottom: 5px;
}

.comment-date-dash {
	color: #999;
}

#dashboard-con {
	padding-bottom: 100px;
}

html, body {
	font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #f3f3f4;
	color: #676a6c;
	height: 100%;
}

.box {
	border: 1px red dotted;
}

#side-menu {
	background-color: #2f4050;
	padding: 0px;
}

#side-menu h1 {
	color: #1f3647;
	text-align: center;
	margin: 10px 0px;
	font-size: 25px;
}

#side-menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#side-menu a {
	padding: 12px 20px;
	text-decoration: none;
	color: #9fb1c2;
	font-weight: bold;
	font-size: 13px;
	display: block;
}

#side-menu .glyphicon {
	margin-right: 6px;
}

#side-menu a:hover {
	background-color: #293846;
	display: block;
	color: #fff;
}

#side-menu .active a {
	color: #fff;
	background-color: #293846;
}

#side-menu .settings-btn {
	background-color: #1ab394;
}

#side-menu .settings-btn a {
	color: #fff;
}

#side-menu .settings-btn a:hover {
	background-color: #1ab394;
}

#side-menu .collapseable li {
	padding-left: 20px;
	padding-top: 5px;
}

#side-menu .collapseable a {
	color: #9fb1c2;
	font-size: 12px;
	padding: 0px 10px;
	text-decoration: none;
	display: block
}

#side-menu .collapseable a:hover {
	color: #fff;
}

#side-menu .collapseable {
	border-left: 4px solid #1ab394;
	background-color: #293846;
}

#side-menu .link > ul > li {
	padding-bottom:...

JavaScript

$(document).ready(function() {
	$('[data-toggle="offcanvas"]').click(function() {
		$('#side-menu').toggleClass('hidden-xs');
	});
});