JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<!-- background wrapper inner -->
<header class="header">
  <div class="container">
    <div class="header-logo">
      <a href="#">
        <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="logo" class="logo-img">
      </a>
    </div>
    <div class="header-main-nav">
      <div class="main-nav">
        <ul class="clearfix">
          <li class="active">
            <a href="#">menu item</a>
          </li>
          <li>
            <a href="#">menu item</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="breadcrumbs">
    <div class="container">
      <ul class="breadcrumbs-menu clearfix">
        <li>blog</li>
      </ul>
    </div>
  </div>
</header>

CSS

/* background wrapper inner */
.container {
  width: 600px;
  margin-right: auto;
  margin-left: auto;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
  content: " ";
  clear: both;
  display: table;
}

.header-logo,
.header-main-nav {
  float: left;
}

.header-logo {
  width: 25%;
}

.header-main-nav {
  width: 75%;
}

.header-logo .logo-img {
  max-height: 50px;
}

.header-main-nav .main-nav {
  float: right;
}

.header-main-nav .main-nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-main-nav .main-nav > ul > li {
  float: left;
}

.header-main-nav .main-nav > ul > li > a {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #D0D0D0;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px;
}

.header-main-nav .main-nav > ul > li.active > a,
.header-main-nav .main-nav > ul > li > a:hover {
  color: #E9603C;
}

.breadcrumbs {
  background: #F1AE9D;
}

.breadcrumbs .breadcrumbs-menu {
  background: #E9603C;
  padding: 10px;
}

.breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumbs ul:before,
.breadcrumbs ul:after {
  content: " ";
  clear: both;
  display: table;
}

.breadcrumbs ul li {
  float: left;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
}

JavaScript

/* background wrapper inner */