JSFiddle - React, Tailwind, and code Playground

by ktabarez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"></script>
<div class="page-sidebar sidebar-fixed" id="sidebar">
                <!-- Page Sidebar Header-->
                <div class="sidebar-header-wrapper">
                    <input type="text" class="searchinput">
                    <i class="searchicon fa fa-search"></i>
                    <div class="searchhelper">Search Reports, Charts, Emails or Notifications</div>
                </div>
                <!-- /Page Sidebar Header -->
                <!-- Sidebar Menu -->
                <ul class="nav sidebar-menu">
                    <!--Dashboard-->
                    <li class="active">
                        <a href="index.html">
                            <i class="menu-icon glyphicon glyphicon-home"></i>
                            <span class="menu-text"> Dashboard </span>
                        </a>
                    </li>
                    <!--Databoxes-->
                    <li>
                        <a href="databoxes.html">
                            <i class="menu-icon glyphicon glyphicon-tasks"></i>
                            <span class="menu-text"> Data Boxes </span>
                        </a>
                    </li>
                    <!--Widgets-->
                    <li>
                        <a href="widgets.html">
                            <i class="menu-icon fa fa-th"></i>
                            <span class="menu-text"> Widgets </span>
                        </a>
                    </li>
                    <!--UI Elements-->
                    <li>
                        <a href="#" class="menu-dropdown">
                            <i class="menu-icon fa fa-desktop"></i>
    ...

CSS

.page-sidebar.sidebar-fixed {
position: fixed;
top: 45px;
float: none!important;
z-index: 1000;
}
.page-sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 224px;
display: block;
}

.page-sidebar.sidebar-fixed:before {
height: 5000px;
top: 45px;
bottom: auto;
}
.page-sidebar:before {
content: "";
position: fixed;
display: block;
width: 219px;
bottom: 0;
top: 0;
left: 5px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
z-index: 1;
}

.page-sidebar .sidebar-header-wrapper {
margin-left: 5px;
height: 40px;
margin-bottom: 0;
position: relative;
}

.page-sidebar .sidebar-header-wrapper .searchinput {
height: 41px;
z-index: 2;
background-color: #fff;
display: block;
position: absolute;
top: 0;
left: 0;
border: 1px solid #fff;
padding-left: 40px;
width: 100%;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
-webkit-border-radius: 0!important;
-webkit-background-clip: padding-box!important;
-moz-border-radius: 0!important;
-moz-background-clip: padding!important;
border-radius: 0!important;
background-clip: padding-box!important;
color: #858585;
background-color: #fbfbfb;
border: 1px solid #d5d5d5;
font-family: inherit;
-webkit-transition: -webkit-box-shadow .45s,border-color .45s ease-in-out;
-moz-transition: -moz-box-shadow .45s,border-color .45s ease-in-out;
-o-transition: box-shadow .45s,border-color .45s ease-in-out;
transition: box-shadow .45s,border-color .45s ease-in-out;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.page-sidebar .sidebar-header-wrapper .searchicon {
cursor: pointer;
display: inline-block;
height: 12px;
left: 20px;
position: absolute;
top:...

JavaScript

function getThemeColorFromCss(n) {
    var t = $("<span><\/span>").hide().appendTo("body"),
        i;
    return t.addClass(n), i = t.css("color"), t.remove(), i
}

function InitiateSideMenu() {
    $(".sidebar-toggler").on("click", function() {
        return $("#sidebar").toggleClass("hide"), $(".sidebar-toggler").toggleClass("active"), !1
    });
    var n = $("#sidebar").hasClass("menu-compact");
    $("#sidebar-collapse").on("click", function() {
        $("#sidebar").is(":visible") || $("#sidebar").toggleClass("hide");
        $("#sidebar").toggleClass("menu-compact");
        $(".sidebar-collapse").toggleClass("active");
        n = $("#sidebar").hasClass("menu-compact");
        n && $(".open > .submenu").removeClass("open")
    });
    $(".sidebar-menu").on("click", function(t) {
        var i = $(t.target).closest("a"),
            u, r, f;
        if (i && i.length != 0) {
            if (!i.hasClass("menu-dropdown")) return n && i.get(0).parentNode.parentNode == this && (u = i.find(".menu-text").get(0), t.target != u && !$.contains(u, t.target)) ? !1 : void 0;
            if (r = i.next().get(0), !$(r).is(":visible")) {
                if (f = $(r.parentNode).closest("ul"), n && f.hasClass("sidebar-menu")) return;
                f.find("> .open > .submenu").each(function() {
                    this == r || $(this.parentNode).hasClass("active") || $(this).slideUp(200).parent().removeClass("open")
                })
            }
            return n && $(r.parentNode.parentNode).hasClass("sidebar-menu") ? !1 : ($(r).slideToggle(200).parent().toggleClass("open"), !1)
        }
    })
}

function InitiateWidgets() {
    $('.widget-buttons *[data-toggle="maximize"]').on("click", function(n) {
        n.preventDefault();
        var t = $(this).parents(".widget").eq(0),
            i = $(this).find("i").eq(0),
            r = "fa-compress",
            u = "fa-expand";
        t.hasClass("maximized") ? (i && i.addClass(u).removeClass(r),...