JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div> <a href="index.html">
                    <i class="icon-home"></i>
                    <span>Home</span>
                </a>

        </li>
        <li> <a href="chart-showcase.html">
                    <i class="icon-signal"></i>
                    <span>Charts</span>
                </a>

        </li>
        <li class=""> <a class="dropdown-toggle" href="#">
                    <i class="icon-group"></i>
                    <span>Users</span>
                    <i class="icon-chevron-down"></i>
                </a>

            <ul class="submenu" style="display: none;">
                <li><a href="user-list.html">User list</a>

                </li>
                <li><a href="new-user.html">New user form</a>

                </li>
                <li><a href="user-profile.html">User profile</a>

                </li>
            </ul>
        </li>
        <li class=""> <a class="dropdown-toggle" href="#">
                    <i class="icon-edit"></i>
                    <span>Forms</span>
                    <i class="icon-chevron-down"></i>
                </a>

            <ul class="submenu" style="display: none;">
                <li><a href="form-showcase.html">Form showcase</a>

                </li>
                <li><a href="form-wizard.html">Form wizard</a>

                </li>
            </ul>
        </li>
        <li> <a href="gallery.html">
                    <i class="icon-picture"></i>
                    <span>Gallery</span>
                </a>

        </li>
        <li> <a href="calendar.html">
                    <i class="icon-calendar-empty"></i>
                    <span>Calendar</span>
                </a>

        </li>
        <li> <a class="dropdown-toggle" href="tables.html">
                   ...

CSS

/* Sidebar */
 #sidebar-nav {
    position: absolute;
    width: 180px;
    float: left;
    margin: 0em;
    padding-top: 5.8em;
}
#sidebar-nav #dashboard-menu {
    list-style: none;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0;
    margin-left: 20px;
    /* sidebar submenus */
}
#sidebar-nav #dashboard-menu > li > a {
    display: block;
    padding: 19px 14px 15px 14px;
    margin-left: -15px;
    margin-bottom: 5px;
    border-bottom: 1px solid #dae1e8;
    box-shadow: 0 2px 1px -1px #FFFFFF;
    color: #6e829b;
    outline: 0px;
    line-height: 21px;
}
#sidebar-nav #dashboard-menu > li {
    position: relative;
    /* font awesome icon */
}
#sidebar-nav #dashboard-menu > li .icon-group {
    font-size: 22px;
}
#sidebar-nav #dashboard-menu > li i {
    font-size: 23px;
    top: 17px;
}
#sidebar-nav #dashboard-menu > li:hover i {
    opacity: 1;
}
#sidebar-nav #dashboard-menu > li.active > a, #sidebar-nav #dashboard-menu > li > a:hover {
    color: #33455a;
    text-decoration: none;
}
#sidebar-nav #dashboard-menu > li.active a {
    font-weight: 600;
    text-shadow: 1px 1px 1px #fff;
}
#sidebar-nav #dashboard-menu > li.active i {
    opacity: 1;
}
#sidebar-nav #dashboard-menu .pointer {
    position: absolute;
    right: 9px;
    top: 20px;
}
#sidebar-nav #dashboard-menu .pointer .arrow, #sidebar-nav #dashboard-menu .pointer .arrow_border {
    border-color: transparent #fff transparent transparent;
    border-width: 11px;
    border-style: solid;
    font-size: 0;
    left: 50%;
    line-height: 0;
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 1002;
    left: 0;
    margin-left: 45%;
}
#sidebar-nav #dashboard-menu .pointer .arrow_border {
    border-color: transparent #c0d2dd transparent transparent;
    border-width: 11px;
    margin-left: -1px;
    border-style: solid;
    z-index: 1001;
    top: 0px;
}
#sidebar-nav #dashboard-menu a span {
    margin-left: 35px;
    transition: color .1s...