JSFiddle - React, Tailwind, and code Playground

by Sebin Simon

HTML

<div class="row">
                <div class="small-2 columns" id="side-nav">
                                  <ul>
                            <li class="active"><a href="#"><h3><span class="icon-upload"></span>Upload Excel Reports</h3></a></li>
                            <li><a href="#"><h3><span class="icon-log"></span>Log</h3></a></li>
                            <li><a href="#"><h3><span class="icon-search"></span>Search</h3></a></li>
                            <li>
                                <h3><span class="icon-transaction"></span>Transaction Trends</h3>
                                <ul>
                                    <li><a href="#">By Location</a></li>
                                    <li><a href="#">By Account</a></li>
                                    <li><a href="#">By Line of Business</a></li>
                                </ul>
                            </li>
                        </ul>
              
                </div>
                <div class="small-10 columns">
                   Lorem Ispum doler emit   Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum doler emit  Lorem Ispum...

CSS

.columns{
				display:block;
			}
			.small-2{
				200px; /*sample  width  */
                float:left;
			}
			.small-10{
				width:760px; /*sample  width  */
                float:left;
			}
            #side-nav
   {
    
   }

#side-nav ul{margin-left:0;padding:0; background-color: #f0f0f0;margin-top:0;}
#side-nav ul li{ border-bottom:thin solid #fff; background-color: #f0f0f0;}
#side-nav h3 {
    font-size: 14px;
    line-height: 30px;
    cursor: pointer; background-color: #f0f0f0;
}
#side-nav h3 span {
	margin-left:15px;
	margin-right: 10px;
}
#side-nav ul ul li{
	border-bottom:none;
}
#side-nav ul ul li a {
	text-decoration: none;
	font-size: 12px;
	line-height: 27px;
	display: block;
	padding: 0 15px 0 50px;
	/*transition for smooth hover animation*/
	transition: all 0.15s;
}
 /*hover effect on links*/
#side-nav ul ul li a:hover {
	/*background: #003545;
	border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
#side-nav ul ul {
	display: none;
}
#side-nav li.active ul {
	display: block;
}