JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <figure>
      <a href="http://localhost/cigarros/" class="custom-logo-link" rel="home" itemprop="url"><img width="261" height="150" src="http://localhost/cigarros/wp-content/uploads/2016/10/cropped-cigarros.jpg" class="custom-logo" alt="cropped-cigarros.jpg" itemprop="logo" /></a>    
    </figure>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <!--                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>-->
    <div class="menu-menu-1-container">
      <ul id="primary-menu" class="menu">
        <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
          <a href="http://localhost/cigarros/about-us/">About Us</a>
        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
          <a href="http://localhost/cigarros/products/">Products</a>
      </li>
      <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
        <a href="http://localhost/cigarros/contact/">Contact</a>
      </li>
      </ul>
    </div>            
  </nav><!-- #site-navigation -->
        </header><!-- #masthead -->

<div id="content" class="site-content">
    

    <section id="home">
    
    
    </section>
    
</div>

CSS

.main-navigation ul {
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.main-navigation li {
    border-top: 1px solid #eeb422;
    padding: 7px;
}

.main-navigation li:last-child {
    border-bottom: 1px solid #eeb422;
}

.main-navigation a{
   
}

#home{
  width: 80%;
  height: 100%;
  background-color: black;
}