JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
  <span class="icon-bar">&#9776;</span>
  
</button>

CSS

.navbar-toggle {
   position: relative;
   float: right;
   padding: 9px 10px;
   margin-top: 8px;
   margin-right: 15px;
   margin-bottom: 8px;
   background-color: #cccccc;
   border: 1px solid transparent;
   border-radius: 4px;
}

.navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   background-color:#000000;
   border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
   margin-top: 4px;
}


:focus {
    outline:none;
}

.navbar-toggle:hover {
  background: #454545;
  color: #FFFFFF;
  cursor: pointer;
}
/*
    In the latest Firefox, this is not needed, but will keep this in here anyways.
 */
::-moz-focus-inner {
    border:0;
}