JSFiddle - React, Tailwind, and code Playground

by Yerko Palma

HTML

<header class="header">
  <div class="header-logo">
    <a class="header-logo-link" href="#">Titulo</a> 
  </div>
  <div class="header-toggle js-toggle-mobile-menu">
    <div class="header-toggle-bar"></div>
    <div class="header-toggle-bar"></div>
    <div class="header-toggle-bar"></div>
  </div>
  <nav class="header-nav">
    <div class="header-nav-item is-active">
      <a href="#" class="header-nav-item-link">Link 1</a>
    </div>
    <div class="header-nav-item">
      <a href="#" class="header-nav-item-link">Link 2</a>
    </div>
    <div class="header-nav-item">
      <a href="#" class="header-nav-item-link">Link 3</a>
    </div>
  </nav>
</header>

SCSS

// Variables
$primary-color-dark:   #D32F2F;
$primary-color:        #F44336;
$primary-color-light:  #FFCDD2;
$primary-color-text:   #FFFFFF;
$accent-color:         #FF5252;
$primary-text-color:   #212121;
$secondary-text-color: #727272;
$divider-color:        #B6B6B6;
$font:              sans-serif;

// Component Header

.header {
  font-family: $font;
  min-height: 50px;
  background-color: $primary-color;  
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   
}
  .header-logo {
    align-self: center; 
    width: 20%;
  }
  .header-logo-link {
    align-self: center;
    padding: 4px 12px;
    color: $primary-color-text;
    text-decoration: none;
  }
  .header-logo-link:hover {
    color: $primary-color-light;
  }
  .header-nav {        
    width: 80%;    
    display: flex;    
    justify-content: flex-end;
  }
    .header-nav-item {       
      align-self: stretch;
      padding: 0 10px;  
      display: flex;
      border-bottom: 5px solid transparent;
    }
    .header-nav-item:hover, .header-nav-item.is-active {
      // background-color: $primary-color-dark;
      border-bottom: 5px solid $primary-color-light;
    }
      .header-nav-item-link {
        align-self: center;
        color: $primary-color-text;
        text-decoration: none;        
      }