JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<div class="header">

<div class="az-index">
  <ul>
    <li><span>A-Z TOPICS: </span></li>
    <a href=""><li>A</li></a>
    <a href=""><li>B</li></a>
    <a href=""><li>C</li></a>
    <a href=""><li>D</li></a>
    <a href=""><li>E</li></a>
    <a href=""><li>F</li></a>
    <a href=""><li>G</li></a>
    <a href=""><li>H</li></a>
    <a href=""><li>I</li></a>
    <a href=""><li>J</li></a>
    <a href=""><li>K</li></a>
    <a href=""><li>L</li></a>
    <a href=""><li>M</li></a>    
    <a href=""><li>N</li></a>    
    <a href=""><li>O</li></a>    
    <a href=""><li>P</li></a>    
    <a href=""><li>Q</li></a>    
    <a href=""><li>R</li></a>    
    <a href=""><li>S</li></a>    
    <a href=""><li>T</li></a>
    <a href=""><li>U</li></a>
    <a href=""><li>V</li></a>
    <a href=""><li>W</li></a>
    <a href=""><li>X</li></a>
    <a href=""><li>Y</li></a>
    <a href=""><li>Z</li></a>
    <a href=""><li>#</li></a>
  </ul>
</div>

<div class="nav-main">
  <ul>
    <li><a href="">Front Cover</a></li>
    <li><a href="">Bureaus</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Data</a></li>
    <li><a href="">Alerts</a></li>
    <li><a href="">Locations</a></li>
    <li><a href="">Staff</a></li>
    <li><a href="">Jobs</a></li>
    <li><a href="">Logins</a></li>
   </ul>
</div>

<span><a href="">Topics</a> > <a href="">EH Topics</a> > Tire</span>
</div>

<div class="content-container">
  <div class="content-nav">
    <ul>
    <li><span>Environmental</span><br><a>Health<br>Program Units</a></li>
      <li><a href="">Consumer Health Protection Services Unit</a></li>
      <li><a href="">Drinking Water Protection Services Unit</a></li>
      <li><a href="">Environmental Health Fiscal and Administration Unit</a></li>
    </ul>
  </div>
  
  <div class="content">
    <div class="rounded-container">
      <h1>
      Tire
      </h1>
      <span>
      Related Services
      </span>
      <ul>
        <li><a href="">General...

CSS

body{
  background-color: #c4c4c4;
}

.header{
  width: 100%;
  min-height: 100px;
  background-color: white;
  padding: 5px;
  border: .5px solid #9e9d9d;
}

.az-index{
  background-color: #363636;
  width: 100%;
  height: 26px;
  font-size: 12px;
}

.az-index li{
  float: left;
  list-style: none;
  padding: 4.5px 3px;
}

.az-index ul{
  margin: 0px;
}

.az-index a{
     color: #e5e5e5; 
}

.az-index a:hover{
    color: white;
    font-size: 110%;
}

.az-index span{
    float: left;
    color: grey;
    user-select: none;
    cursor:default;
}

.nav-main{
    background: -webkit-linear-gradient(#9ebf67, #637546);
    background: -moz-linear-gradient(#9ebf67, #637546);
    background: -o-linear-gradient(#9ebf67, #637546);
    background: linear-gradient(#9ebf67, #637546);
    border-bottom: 5px solid #576343;
    box-shadow: 0 10px 5px #888888;
    float: left;
    width: 100%;
}
.nav-main a{
    color: #e5e5e5;
    font-size: 15px;
    text-transform: uppercase;
}

.nav-main li{
    border-left: .1px solid black;
    float: left;
    list-style: none;
    padding: 10px 10px;
}

.nav-main ul{
  margin: 0px;
  padding: 0px;
}

.header > span{
    float: left;
    margin-top: 15px;
}

.header > span > a{
    color: #667350;
}

.header > span{
    cursor:default;
    user-select: none;
}

.content-container{
    margin-top: 8px;
}

.content-nav{
    background: -webkit-linear-gradient(#9ebf67, #637546);
    background: -moz-linear-gradient(#9ebf67, #637546);
    background: -o-linear-gradient(#9ebf67, #637546);
    background: linear-gradient(#9ebf67, #637546);
    border: 1px solid black;
    box-shadow: 0 10px 5px #888888;
    float: left;
    max-width: 20%;
}

.content-nav a{
    color: #f2f2f2;
}

.content-nav a:hover{
    color: white;
    text-decoration: none;
}

.content-nav ul{
    list-style-type: none;
    margin: 0px 2px;
    padding: 4px 6px;
}

.content-nav li{
    border-bottom: 1px solid #c6d19f;
    margin: 0px;
    padding: 15px 5px;
   ...

JavaScript

/* Completed ~1:08 to 2:17 PM */