JSFiddle - React, Tailwind, and code Playground

by bryiantan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <div class="container-fluid">
     <div class="wrapper">
       <!-- logo and mobile menu -->
       <header>
         <div class="logo">
           <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" style="width:100px;height:100px;" />
         </div>
        
       </header> 
        <a href="#">Menu</a>
       <nav>
        <ul class="dropdown-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
        </ul>
       </nav>
     </div>
     
  </div>

CSS

body {
  margin: 0;
  padding: 0;
}
 
header {
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
header .logo img {
  max-width: 100%;
  width: 50px;
  height: auto;
}
 
header > a {
  padding: 10px;
  background-color: #555;
  text-decoration: none;
  color: #fff;
}
 
header > a:hover, header > a:focus {
  color: #1c1c1c;
  background: #ccc;
}
 
nav ul {
  margin: 0;
  padding: 0;
  background-color: #222;
  display: none;
}
 
nav li {
  padding: 10px;
  text-align: center;
}
 
nav a {
  text-decoration: none;
  color: #fff;
}
 
nav li:hover {
  background-color: #333;
}
 
header > a:focus nav ul {
  display: block;
}
 
@media screen and (min-width: 768px) {
  header > a {
    display: none;
  }
 
  nav ul {
    display: flex;
    justify-content: flex-end;
    background: none;
    position: relative;
    top: -40px;
  }
 
  nav li {
    display: inline-block;
  }
 
  nav a {
    padding: 10px;
  }
}