JSFiddle - React, Tailwind, and code Playground

by Rochefort

HTML

<div class="column sidebar" id="right_menu">
        <div class="section">
            <ul class="links yan-menu"><li class="menu-411 first"><a title="" href="/tr/2012-mali-takvimi">AAAA</a></li>
<li class="menu-431"><a href="/tr/linkler">AAAA</a></li>
<li class="menu-418"><a href="/tr/faydali_bilgiler">AAAA</a></li>
<li class="menu-413 last"><a title="" href="/tr/sirkuler">AAAA</a></li>
</ul>        </div>
                            <div class="clearfix" id="menu_l"> 
                    <div class="region region-sidebar-second">
    <div id="block-system-main-menu" class="block block-system block-menu">
      
  <div class="block-content clearfix block-content clearfix">
    <ul class="menu"><li class="first leaf"><a title="" href="/tr/hakkimizda">BBBB</a></li>
<li class="leaf"><a href="/tr/hizmetlerimiz">BBBB</a></li>
<li class="leaf"><a href="/tr/haberler">BBBB</a></li>
<li class="last leaf active-trail"><a class="active-trail active" href="/tr/iletisim">BBBB</a></li>
</ul>  </div>
</div>
  </div>
              </div>
                           </div>

CSS

#right_menu {
    list-style-type: none;
    position: relative;
    z-index: 5;
    float: left;
    margin-top:45px;
}

#right_menu a {
  color: #002C6A;
  display: block;
  font-family: 'DINPro-Bold';
  font-size: 15px;
  height: 20px;
  padding: 15px 0 15px 80px;
  width: 220px;
}

#right_menu a:hover {
    color: #FFF;
    font-size: 15px;
    font-family: 'DINPro-Bold';
}

#right_menu ul li {
    list-style-type: none;
    border-bottom:1px solid #e5e5e5;
    margin: 0 0 0 0;
}

#right_menu a.active {
   // background: url("../img/left_act.png") !important;
    color:#fff;
    
}

.menu-411 a {
    background:url("../img/malitakvim.png") no-repeat scroll 7% center #FFFFFF !important;
}
.menu-411 a:hover {
    background:url("../img/malitakvim_h.png") no-repeat scroll 7% center #002C6A !important;
}
.menu-411 a.active {
    background:url("../img/mali_a.png") no-repeat scroll 7% center #002C6A !important;
}
.menu-413 a{
    background:url("../img/sirkuler.png") no-repeat scroll 7% center #FFFFFF !important;
}
.menu-413 a:hover {
    background:url("../img/sirkuler_h.png") no-repeat scroll 7% center#002C6A !important;
}
.menu-413 a.active {
    background:url("../img/sirkuler_a.png") no-repeat scroll 7% center#002C6A !important;
}
.menu-431 a{
    background:url("../img/linkler.png") no-repeat scroll 7% center #FFFFFF !important;
}
.menu-431 a:hover {
    background:url("../img/linkler_h.png") no-repeat scroll 7% center #002C6A !important;
}
.menu-431 a.active{
    background:url("../img/linkler_a.png") no-repeat scroll 7% center #002C6A !important;
}
.menu-418 a{
    background:url("../img/faydali.png") no-repeat scroll 7% center #FFFFFF !important;
}
.menu-418 a:hover{
    background:url("../img/faydali_h.png") no-repeat scroll 7% center #002C6A !important;
}
.menu-418 a.active{
    background:url("../img/faydali_a.png") no-repeat scroll 7% center #002C6A !important;
}

ul, ol, .item-list ul {
  margin-bottom: 1.5em;
  padding-left: 0px;
}