JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<header>
            <h1>Name of company</h1>
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Something else</a></li>
                </ul>
            </nav>
            
            <a href="" class="toggle-nav">Toggle Navigation</a>
        </header>

CSS

nav {
        position: relative;
        height: auto;
        width: 100%;
        -webkit-transform: translateX(0);
        background: #f00;
    }
    
    nav ul li,
    nav ul li a {
        display: inline-block;
        text-decoration:none;
    }
    
    header h1 {
     position: relative;   
    }