JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<ul class="sidebar-nav">
    <li class="sidebar-top"></li>
    <li class="active">
        <div class="shadow-container">
            <div class="menu-indicator"></div> <a href="#" data-toggle="collapse" data-target="#dashboard"><i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i></a>

            <ul id="dashboard" class="collapse">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
                <li><a href="#">Separated link</a>

                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div> <a href="#" data-toggle="collapse" data-target="#charts"><i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i></a>

            <ul id="charts" class="submenu collapse">
                <li><a href="#">Action</a>

                </li>
                <li><a href="#">Another action</a>

                </li>
                <li><a href="#">Something else here</a>

                </li>
                <li><a href="#">Separated link</a>

                </li>
            </ul>
        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div> <a href="#"><i class="fa fa-users"></i><span>Users</span></a>

        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div> <a href="#"><i class="fa fa-calendar-o"></i><span>Calendar</span></a>

        </div>
        <div class="menu-arrow"></div>
    </li>
    <li>
        <div class="shadow-container">
            <div class="menu-indicator"></div> <a href="#"><i class="fa...

CSS

span {
    display:inline-block
}
.sidebar-nav > li > div a > span:first-letter {
    font-weight:bold;
}