JSFiddle - React, Tailwind, and code Playground

by nategines

HTML

<body>
        <header>    
            <nav>
                <div id="logo"> <img src="rocketdesign.png" alt="RocketDesign"></div>

                <h1>Nate Gines</h1>
            </nav>    

        <div id="erasers">
            <div id="eraser1"><img src="eraser1.png" width="315" height="73" alt=""></div>
            <div id="eraser2"><img src="eraser2.png" alt=""></div>
            <div id="eraser3"><img src="eraser3.png" alt=""></div>
        </div>

    <div id="bars">
        <div id="bar1">
        </div>
        <div id="bar2">
        </div>
        <div id="bar3">
        </div>
        <div id="bar4">
        </div>
        <div id="bar5">
        </div>
    </div>
    <div class="line">
    </div>
        



    </header>
                
    
        
    </body>

CSS

body{
    margin:0;
    padding:0;

}
    
    
    nav{
            position: relative;
            width:64em;
            margin:0px auto;
            margin-top:1.875em;
            z-index:4;
            top:0em;
        }
        
    #logo{
        text-align: center;
        width:100%;
        margin:0em;
    }


    h1{
        font: 3.9em 'BebasRegular', Arial, sans-serif;letter-spacing: 0;
        letter-spacing:40px;
        text-transform:uppercase;
        margin-top:.18em;
        text-align: center;

    }
    
    #bars{
        top:0em;
        position:absolute;
        width:100%;
        z-index:1;
    }

    #bar1{
        height: 3.3125em;
        margin-top: 3.3125em;
    }
    #bar2{
        height: 1.1em;
        margin-top: 0.8125em;
    }
    #bar3{
        height: 1.1em;
        margin-top: 0.8125em;
    }
    #bar4{
        height: 2.8125em;
        margin-top: 2.5em;
    }
    
    #bar5{
        height: 3.5625em;
        margin-top: 0.8125em;
    }
    
    #bar1, #bar2, #bar3, #bar4, #bar5{
        background-color: rgb(204,204,204);
        width: 100%;
        position:relative;
        

    }
    
#erasers{
    position:absolute;
    width:100%;
    text-align: center;
    z-index:2;
    top:0em;
}

#eraser1, #eraser2, #eraser3{
    position:relative;
    margin:0px auto;
    width:64em;
    
}
    
#eraser1{
    margin-top:2.1em;    
}

#eraser2{
    margin-top:0.8em;
}

#eraser3{

    margin-top:2.2em;
    
}
.line{
    background-color:rgb(0,51,51); 
    height: 0.625em;
    width:100%;
    z-index:3;
}