JSFiddle - React, Tailwind, and code Playground

by waleedbinahmed

HTML

<div class="menu">

        <div class="topnav">
		  <a href="#">&nbsp;</a>
                  <a href="http://www.ibta-arabia.com/"><strong>Home</strong></a>
                  <a href="http://www.ibta-arabia.com/contact-us/"><strong>Contact Us</strong></a>
        </div>
</div>

CSS

.menu {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
}


.topnav {
     overflow: hidden;
     background-color: #2C4059;
}


.topnav a {
     float: left;
     color: white;
     text-align: center;
     padding: 18px 16px;
     text-decoration: none;
     font-size: 17px;
     border-top: 4px solid transparent;
     border-bottom: 4px solid transparent;
     border-right:1px solid #4B5C90;  
}

 .topnav a:first-child
                    {
                       padding-left: 90px;
                       border-right:none;
                    }
.topnav a:hover:first-child
{
  border-top:none;
  cursor: default;
}                    
.topnav a:hover {
     /*background-color: #D90D29;
     color: white; */
     border-top: 4px solid #d90d29;
     border-right-width:5
}


.topnav a.active {
     background-color: #4CAF50;
     color: white;
}