JSFiddle - React, Tailwind, and code Playground

by snehil suresh wakchaure

HTML

<div class="containerr">
    <div class="roww">
        <!-- Left Navigation Menu  -->
        <div class="coll-md-2 no-float">
         <div class="nav-side-menu">
            <div class="brand"> &nbsp</div>
            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
          
                    <div class="menu-list">
              
                        <ul id="menu-content" class="menu-content collapse out">
                            <li>
                              <a href="#">
                              <i class="fa fa-dashboard fa-lg"></i>Scenario Builder <span class="badge badge-right">3</span>
                              </a>
                            </li>

                            <li id= "addNewScenario">
                              <a href="#">
                              <i class="fa fa-lg"></i> <span class="glyphicon glyphicon-plus-sign"></span> Add New Scenario
                              </a>
                            </li>

                            <li>
                              <a href="#">
                              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-floppy-disk"></span> Save
                              </a>
                            </li>

                            <li>
                              <a href="#">
                              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-stats"></span> Test
                              </a>
                            </li>
                        </ul>
                 </div>
            </div>

        </div>

        <!-- FORM CONTENT -->
                   <div class="container">
              <h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
              <form role="form" class="form-horizontal">
                <div class="form-group">
                  <label class="col-sm-1" for="inputEmail1">Email</label>
                  <div...

CSS

.nav-side-menu {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  position: fixed;
  top: 0px;
  width: 280px;
  height: 100%;
  color: #e1ffff;
}

.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}
.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}

.icon-arrow-right {
float: right;
margin-top: 10px;
margin-right: 10px;
}

.badge-right {
float: right;
margin-top: 8px;
margin-right: 6px;
}

.delete-right {
margin-left: 8px;
margin-top: 8px;
margin-right: -6px;
}


.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}
.nav-side-menu ul .sub-menu...