JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body>
    <header role="banner">
        <hgroup class="main_container">
        <h1 id="logo"></h1>
        </hgroup>
        </header>
    <nav>
        <ul class="main_container">
            <li><a href="#">Home</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Initatives</a></li>
            <li><a href="#">Publications</a></li>
            <li><a href="#">Green Homes</a></li>
            <li><a href="#">Renewble Energy</a></li>
            <li><a href="#">Global Warming</a></li>
            <li><a href="#">Lives</a></li>
        </ul>
    </nav>
   <section class="main_container">
            <h1>Why this kolaveri dee? </h1>
        </section> 
</body>
</html>

CSS

body
{
    margin:0;
    background:#000;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    
}
h1
{
    margin:0;
}
.main_container
{
    width:950px;
    margin:0 auto;
}
header
{
    background:#fdf7e7;
    padding:10px;
}
#logo
{
    background:url(../images/logo.jpg);
    height:72px;
    width:302px;
}
nav
{
    background:#e9ebb0;
    height:41px;
    border-bottom:1px solid #c4c297;
}
nav ul
{
    list-style:none;
    background:#577a70;
    height:31px;
    text-align:center;
    margin:0;
    padding-top:10px;
    border-bottom:1px solid #3c4852;
}
nav ul li
{
    float:left;
    
}
nav a
{
    text-decoration:none;
    color:#ffffff;
    padding:0 20px 0 0;
    margin-right:20px;
    border-right:1px dotted white;
}
nav li:last-child a
{
    
    border-right:none;
}
nav a:hover
{
    color:#FFFF33;
}
section
{
    height:200px;
    clear:both;
    padding:0;
    margin:0 auto;
    width:950px;
    background:#577a70;
        
}

JavaScript

<>