JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
  <title>CSS Drop Down Menu Demo</title>
    </head>
    <body>
  <nav>
      <ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Guides</a>
        <ul>
      <li><a href="#">podpfpd</a>
          <ul>
        <li><a href="SUB GUIDE 1">SUB GUIDE 1</a></li>
        <li><a href="SUB GUIDE 2">SUB GUIDE 2</a></li>
          </ul>
      </li>
      <li><a href="#">Guide 2</a></li>
      <li><a href="#">Guide 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Articles</a>
        <ul>
      <li><a href="Article 1">Article 1</a></li>
      <li><a href="Article 2">Article 2</a></li>
        </ul>
    </li>
      </ul>
  </nav> 
  <p>This is a some text...</p>
    </body>
</html>

CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
  }

  body {
    width: 900px;
    margin: 20px auto;
    background: #909eab;
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
  }

  nav {
    margin: 20px;
  }

  nav ul {
    width: auto;
  }

  nav>ul {
    width: 800px;
  }

  nav ul ul {
    display: none;
  }

    nav ul li:hover > ul {
      display: block;
    }


  nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: block;
  }
    nav ul:after {
      content: ""; clear: both; display: block;
    }

    nav ul li {
      float: left;
    }
      nav ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
        nav ul li:hover a {
          color: #fff;
        }
    
      nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
      }
      
    
    nav ul ul {
      background: #5f6975; border-radius: 0px; padding: 0;
      position: absolute; top: 100%;
    }
      nav ul ul li {
        width: auto;
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
      }
        nav ul ul li a {
          width: auto;
          padding: 15px 40px;
          color: #fff;
        } 
          nav ul ul li a:hover {
            background: #4b545f;
          }
    
    nav ul...