JSFiddle - React, Tailwind, and code Playground

by Thet Hlaing

HTML

<div class="main-header">
                        <div class="logo">
                            <a href="index.html"><img src="images/logo2.png" title="logo" /></a>
                        </div>
                        <div class="top-nav">

                        <span class="menu"></span>
                            <ul>
                                <li class="active"><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
                                <li><a href="projects.html">Mission</a></li>
                                <li><a href="services.html">Services</a>
                                <ul>
             <li style=" background: #555; 
      display: block; 
      color: #fff;
      text-shadow: 0 -1px 0 #000;" ><a href='#'>Product 1</a>
             </li>
             <li class='has-sub'><a href='#'>Product 2</a>
             </li>
          </ul>                 
                                </li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                <div class="clearfix"> </div>
                            </ul>
                        </div>
                        <div class="clearfix"> </div>
                        </div>

CSS

.logo{
        float: left;
        background: #FFF;
        padding: 28px 29px 19px 30px;
    }
    .top-nav ul li{
        display:inline-block;
        float:left;  
    }
    .top-nav ul li a{
        background:#fff;
        float: none;
        display: inline-block;
          padding: 40px 47.6px;
      letter-spacing: 2px;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
      color: #32332e;
      font-size: 0.875em;
      transition: 0.5s ease;
      -o-transition: 0.5s ease;
      -webkit-transition: 0.5s ease;
      margin: 0 -1px;
      border-left: 1px solid #fff;
      text-decoration:none;
    }
    .top-nav li.active> a, .top-nav li> a:hover {
        color: #FFF;
        background:#404642;
    }
    .top-nav li:hover ul{
        display:block ;
    }
    .top-nav li ul{
        padding: 0;     
        position:absolute;
       display:none;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s; -transition: opacity 0.2s;
        
    }
    .top-nav{
        float:right;
        background: #fff;
    }
    .main-header {
        margin-top: 16px;
          background:#fff;
    }