JSFiddle - React, Tailwind, and code Playground

HTML

<nav>

<ul class="navigation">
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
            <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
            <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
            <li class="dropdown-submenu"><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span>
                <ul class="dropdown-menu">
                    <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li>
                    <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li>
                    <li><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span></li>
                </ul>
            </li>
        </ul>
    </li>
 </ul>



 <!-- DROPDOWN SELECT MENU FOR SMALL SCREENS -->      
  <div class="medium button dropdown" style="">
    Select
  <ul class="no-hover" style="top: 35px;">
  <li><a href="index-2.html"><strong>Home</strong></a></li>
  <li><a href="shared-hosting.html"><strong>Web Hosting</strong></a></li>
  <li><a href="shared-hosting.html">- Shared Hosting</a></li>
  <li><a href="reseller-hosting.html">- Reseller Hosting</a></li>
  <li><a href="vps.html"><strong>VPS</strong></a></li> <li><a href="dedicated-servers.html"><strong>Servers</strong></a></li>
  <li><a href="index-2.html"><strong>Features</strong></a></li>
  <li><a href="index-2.html">- Home Pricing Box</a></li>

  <li><a href="index-content-slider.html">- Home Content Slider</a></li>
  <li><a href="domain-names.html">- Domain Names</a></li>
 ...

CSS

.navigation{ margin:0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;box-shadow: 0 0 14px 0px #e5e1e1; height:45px;  background: url(../images/backgrounds/menubg.png) repeat-x; border: 1px solid #e5e1e1;}
nav { position: relative; font-size:13px; margin: 0px auto; width: 100%;}
nav ul {list-style-type: none; padding:0; margin:0;}
nav ul li {float: left; position: relative;border-right:1px solid #e9e9e9; width:20% }
nav ul li.last {border-right:0;}
nav ul li a {text-align: center;display:block;text-decoration:none;padding: 12px 0;color:#2d2d2d;}
nav ul li a:hover { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li.active a { color:#d94a38; background: url(../images/arrow.png) no-repeat 0% 50%;}
nav ul li ul {display: none}
nav ul li:hover ul {display: block;position: absolute;list-style-type: none;margin:0;padding:0;z-index:999; background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 3px 12px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #c12727;
    border-right-color: #dfdfdf;
    border-bottom-color: #dfdfdf;
    border-left-color: #dfdfdf;}
nav ul li:hover ul li {
    padding:8px 0;
    border-top: 1px solid #efefef;
    float: none;
    background: none;
    width:160px;
    border-right:0;}

nav ul li:hover ul li span{
    padding:0;
    margin:0;
    font-size:11px;
    color:#ccc;}    

nav ul li:hover ul li:first-child { border-top: none; } 
nav ul li:hover ul li a {color:#2d2d2d; font-size:12px; padding:0;  text-align: left;  background:transparent;}
nav ul li:hover ul li a:hover {color:#c12727; background:transparent;}
nav ul li.last:hover ul li {border-right:0;width:...