JSFiddle - React, Tailwind, and code Playground

by RaphaelDDL

HTML

<link rel="stylesheet" href="http://wastandards.webaula.com.br/versions/1.0/Templates/Base/Css/Standards.css">
<link rel="stylesheet" href="http://wastandards.webaula.com.br/versions/1.0/Templates/Base/Css/Colors.css">
<div class="adminOptions cor1_bg">
    <div id="adminMenu">
        <div class="viewport">
            <div class="overview">
                <ul class="verticalList1 adminMenu">
                    <li>
                        <div class="menuBorder"></div><a id="btnMenuDash" href="../../Dashboard/View.aspx"><i class="icon24px pattern white opacity60percent sprite-places-home-1"></i><span>Página <strong>Principal</strong></span></a>
                    </li>
                    <li class="active">
                        <div class="menuBorder"></div>	<a id="btnMenuEvents" href="../View.aspx">
							<i class="icon24px pattern white opacity60percent sprite-time-calendar-1"></i> <span>Gerenciar <strong>Eventos</strong></span>
						</a>

                    </li>
                    <li>
                        <div class="menuBorder"></div>	<a id="btnMenuQuestions" href="../../Questions/QuestionsView.aspx">
							<i class="icon24px pattern white opacity60percent sprite-infos-question-circle"></i> <span>Gerenciar <strong>Questões</strong></span>
						</a>

                    </li>
                    <li>
                        <div class="menuBorder"></div>	<a id="btnMenuUsers" href="../../Users/View.aspx">
							<i class="icon24px pattern white opacity60percent sprite-contacts-users"></i> <span>Gerenciar <strong>Usuários</strong></span>
						</a>

                    </li>
                    <li>
                        <div class="menuBorder"></div>	<a id="btnMenuManagement" href="../../Management/ConfigView.aspx">
							<i class="icon24px pattern white opacity60percent sprite-programs-app-layout"></i> <span>Gerenciar <strong>Plataforma</strong></span>
						</a>

                        <div class="menuBorder"></div>
                   ...

CSS

ul.verticalList1 {
     list-style: none;
 }
 ul.verticalList1 > li {
     display: block;
     margin: 1px 0 0 0;
     padding: 5px 0;
 }
 ul.verticalList1 > li: first-child {
     border-top: none;
 }
 ul.verticalList1.mini > li {
     padding: 5px 0;
 }
 ul.verticalList1.small > li {
     padding: 10px 0;
 }
 ul.verticalList1.large > li {
     padding: 15px 0;
 }
 .adminOptions #adminMenu .overview {
     list-style: none;
 }
 .adminOptions .adminMenu li {
     font-family: helvetica_condensedbold, Arial, Helvetica, sans-serif;
     font-size: 16px;
     background-color: transparent;
     padding: 0 !important;
     margin: 0 !important;
     display:block;
     /*zoom:1;*/
     /* THIS SHIT MAKES IT WORK */
 }
 .adminOptions .adminMenu li .menuBorder {
     height: 1px;
     background: transparent url("http://wastandards.webaula.com.br/versions/1.0/images/backgrounds/bg_black_30_percent.png") 0 0 repeat;
 }
 .adminOptions .adminMenu li a {
     position: relative;
     color: #fff;
     padding: 10px 0 10px 15px;
     display: block;
     background-color: transparent;
 }
 .adminOptions .adminMenu li a i {
     margin-right: 10px;
 }
 .adminOptions .adminMenu li a strong {
     text-transform: uppercase;
 }
 .adminOptions .adminMenu li:not(.active):hover {
     background: transparent url("http://wastandards.webaula.com.br/versions/1.0/images/backgrounds/bg_white_20_percent.png") 0 0 repeat;
 }
 .adminOptions .adminMenu li:hover {
     -webkit-box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
     -khtml-box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
     -ms-box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
     -o-box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
     box-shadow: inset 1px 1px 12px -3px rgba(0, 0, 0, 0.5);
 }
 .adminOptions .adminMenu li.active {
     background: transparent...