JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-bck"></div>
        <div class="sub-header-bck"></div>
        <div class="container">
            <div class="header">
                <ul class="nav">
                    <a href=""><li>Home</li></a>
                    <a href=""><li>Contact</li></a>
                </ul>
                <input class="search" type="text" name="search" placeholder="search">
            </div>
            <div class="sub-header">
                <ul class="nav">
                    <a href=""><li><</li></a>
                    <a href=""><li>H</li></a>
                    <a href=""><li>X</li></a>
                </ul>
            </div>
            <div class="container">
                <ul class="categories">
                    <li>
                        <h2>Text</h2>
                        <p>sometext</p>
                    <a href=""></a>
                    </li>
                    <li>
                        <h2>Text</h2>
                        <p>sometext</p>
                    <a href=""></a>
                    </li>
                </ul>
            </div>
            <div class="footer">
            </div>
        </div>

CSS

body{
        height:2000px;
        background: #808080;
   }
   .container{
        width:960px;
        margin:0 auto;
   }
   .header-bck{
        width:100%;
        height:80px;
        background: #43484A;
        position: fixed;
        top:0;
        z-index: :9;
   }
   .header{
       z-index: :8;
        width:960px;
        background: #43484A;
        height:80px;
        position: fixed;
        top:0;
        z-index: :9999;
   }
   .header .nav {
       z-index: :7;
        margin:0;
        padding:0;
   }
   .header .nav li{
        width:90px;
        height:80px;
        float:left;
        list-style: none;
        text-align:center;
        line-height:80px;
        color:white;
        border-right:1px solid #666;
   }
   .header .nav a:last-child li{
        border:0;
   }
   .header .nav a:hover li{
        transition: background 0.5s ease;   
        background: #FACB0E;
        color:#43484A;
   }
   .search{
        width:244px;
        height:33px;
        float:right;
        margin-top:20px;
   }
   .sub-header-bck{
        width:100%;
        height:60px;
        margin-top:80px;
        background: #E6E6E6;
        z-index:1;
   }
   .sub-header{
        width:100%;
        height:60px;
        margin-top:-60px;
        background: #E6E6E6;
        z-index:2;
   }
   .sub-header .nav{
        margin:0;
        padding:0;
        float:right;
    }
    .sub-header .nav li{
        width:50px;
        height:60px;
        float:left;
        list-style: none;
        text-align:center;
        line-height:60px;
        color:black;
        border-right:1px solid #ccc;
        font-size:25px;
   }
   .sub-header .nav a:last-child li{
        border:0;
   }
   .sub-header .nav a:hover li{
        background: #FACB0E;
        color:#43484A;
   }
   .categories{
        padding:0;
        margin:20px 0 0 0 ;
   }
   .categories li{
        position:relative;
        z-index:-1;
        list-style: none;
        float:left;
       ...