JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div style="width: 100%; height: 600px; background: green">


<div id="menu">
<ul>
  <li class="active"><a href="#">exemplo 1 ativo</a></li>
  <li><a href="#">exemplo 2</a></li>
  <li><a href="#">exemplo 2</a></li>
</ul>
</div>
<div id="conteudo">
<div>
</div></div>

CSS

#menu {
 float:left;
width: 195px; 
font-family: sans-serif

}
#conteudo {
  margin-left: 230px;
  border: 1px solid #000;
  width: 220px;
  height: 350px;
  background: #000;
}
#menu ul li {
 list-style:none; 
 border-radius: 10px 0 0 10px;  
 border-style: solid;
 boder-color: #000;
 border-width: 1px 0 1px 1px;
 margin:20px 0;
 width: 190px;
 height:80px;
 background: #8bc34a;

}
#menu ul li a:hover{
  background: #ccc;
}
#menu ul li a {
 display:block;
 padding:10px;
 width: 168px;
 height: 58px;
 border: 1px solid #000; 
 line-height: 58px;
 text-decoration:none;
 border-radius: 10px 0 0 10px; 
}
#menu ul li.active a {
 background: #000;
 color: #fff;
}
#menu ul li.active:before {
  content:'';
 padding: 6px;
 background: #ccc;
 width:2px;
 height: 2px;
 float:right;
 position:relative;
 top:-13px
}
#menu ul li.active:after {
 content:'';
 padding: 6px;
 background: #ccc;
 width:2px;
 height: 2px;
 float:right;
}