JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div class="subnav_wines">
                <ul>
                <li><a href="?sel_regio=4">ToBeDefined</a></li><li><a href="?sel_regio=2">Valpollicella</a></li><li><a href="?sel_regio=1">Veneto</a></li>                      <li id="dd_sort" class="last"><a id="" href="#">Sorted by</a></li>
                </ul>
                <div style="clear:both"></div>
</div>

CSS

.subnav_wines { border-bottom: 1px solid #b58150; padding: 0; margin-bottom: 0px;  }
.subnav_wines ul { padding: 0; margin: 0; text-align: center;  }
.subnav_wines li  { display:inline-block; padding: 10px 25px 10px 25px;  margin: 0; }
.subnav_wines li.last { border-right: 0; padding: 0;}
.subnav_wines li a  { text-transform: uppercase; color: #b58150; text-decoration: none;}
.subnav_wines li a:hover    { border-bottom: 1px solid #b58150; }
.subnav_wines li a.active   { border-bottom: 1px solid #b58150;}