JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div class="customContent">


  <ul class="mainMenu">
    <li><a href="index.aspx">Main</a></li>
    <li><a href="about.aspx">About</a></li>
    <li><a href="techreports.aspx">Tech Reports</a></li>
    <li class="dropdown">
      <a href="#">Key Links</a>
      <ul class="subMenu">
        <li><a href="/sites/bioweb/Process%20Monitoring/Documents/index.aspx">BioDash</a></li>
        <li><a href="/sites/bioweb/TechOps/ProcessDevelopment/PTE/BioLab/index.aspx">BioLab</a></li>
        <li><a href="http://corpdocs.bmrn.com/livelink/livelink.exe?func=smode.load#nodeid=46961593&amp;view=contents&amp;page=1">Process Monitoring Minutes</a></li>
        <li class="dropdown-submenu">
          <a href="#">PCRAs</a>
          <ul class="subSubMenu">
            <li><a href="http://corpdocs.bmrn.com/livelink/livelink.exe?func=smode.load#nodeid=48047598&amp;view=contents&amp;page=1">rhIDU</a></li>
            <li><a href="http://corpdocs.bmrn.com/livelink/livelink.exe?func=smode.load#nodeid=69732297&amp;view=details&amp;page=1">rhASB</a></li>
            <li><a href="http://corpdocs.bmrn.com/livelink/livelink.exe?func=smode.load#nodeid=68998445&amp;view=details&amp;page=1">rhGALNS</a></li>
          </ul>
        </li>
        <!--li>Regulatory Filings</li-->
        <!--li>Process Control Documents</li-->
        <!--li>PM Guidance Documents</li-->
        <li><a href="http://webconnect.bmrn.com">WebConnect (Discoverant/PI)</a></li>
        <li><a href="/sites/bioweb/TechOps/ProcessDevelopment/PTE/TechToolbox/index.aspx">Tech Toolbox</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.customContent .mainMenu,
  .customContent .mainMenu .subMenu,
  .customContent .mainMenu .subMenu .subSubMenu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .customContent .mainMenu {
    display: table;
    width: 100%;
  }
  
  .customContent .mainMenu > li {
    border-right: 1px solid #ddd;
    display: table-cell;
    width: 25%;
  }
  
  .customContent .mainMenu > li:last-child {
    border: 0;
  }
  
  .customContent .mainMenu > li a {
    display: block;
    color: #fff;
    text-decoration: none;
  }
  
  .customContent .mainMenu > li > a {
    text-align: center;
    padding: 10px 15px;
    text-transform: uppercase;
  }
  
  .customContent .dropdown ul a {
    padding: 5px 15px;
    background-color: lightblue;
  }
  
  .customContent .mainMenu > .dropdown,
  .customContent .mainMenu > .dropdown > .subMenu > .dropdown-submenu {
    position: relative;
  }
  
  .customContent .mainMenu .subMenu,
  .customContent .mainMenu .subSubMenu {
    position: absolute;
    display: none;
    width: 100%;
  }
  
  .customContent .mainMenu > .dropdown > .subMenu {}
  
  .customContent .dropdown-submenu .subSubMenu {
    right: 100%;
    top: 0;
  }
  
  .customContent .mainMenu > .dropdown:hover .subMenu,
  .customContent .dropdown-submenu:hover .subSubMenu {
    display: block;
  }
  
  .customContent {
    background: #0064ab;
    /* Old browsers */
    background: -moz-linear-gradient(top, #0064ab 0%, #006db3 53%, #0064ab 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0064ab), color-stop(53%, #006db3), color-stop(100%, #0064ab));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0064ab 0%, #006db3 53%, #0064ab 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0064ab 0%, #006db3 53%, #0064ab 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0064ab 0%, #006db3 53%, #0064ab 100%);
    /* IE10+ */
    background:...