JSFiddle - React, Tailwind, and code Playground

by Gaurav Gandhi

HTML

<div id="header">
  <div id="header-text">
    <div id="one">Birch</div>
    <div id="two">Wood</div>
  </div>
  <div class="nav_active">
    <A href="#"></A>
  </div>
  <div class="nav_inactive">
    <A href="#"></A>
  </div>
  <div class="nav_inactive">
    <A href="#"></A>
  </div>
  <div class="nav_inactive">
    <A href="#"></A>
  </div>
  <div class="nav_inactive">
    <A href="#"></A>
  </div>
</div>

CSS

#header {
  position: relative;
  overflow: hidden;
  min-width: 300px;
  height: auto;
  text-align: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin: 0 5px 0 5px;
}

#header #one {
  font: 1.625em "Arial Black", Helvetica, sans-serif;
  font-weight: 100;
  color: #95061e;
  float: left;
  margin-bottom: 10px;
}

#header #two {
  font: 1.625em Arial, Helvetica, sans-serif;
  margin-top: 3px;
  float: left;
  margin-left: 3px;
  margin-right: 5px;
  color: #953606;
}

#header-text {
  width: 200px;
  margin: 0 auto;
}