JSFiddle - React, Tailwind, and code Playground

by Marie GĂ©rard

HTML

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar one"></span>
    <span class="icon-bar two"></span>
    <span class="icon-bar three"></span>
  </button>

CSS

.navbar-toggle {
  width: 80px;
}

.sr-only {
  visibility: hidden;
  width: 0px;
  height: 0px;
}

.navbar-toggle span.icon-bar {
  width: 25px;
  height: 2px;
  margin: 5px auto;
  background-color: orange;
  display: block;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.navbar-toggle.is-active .icon-bar.two {
  opacity: 0;
}

.navbar-toggle.is-active .icon-bar.one {
  -webkit-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.is-active .icon-bar.three {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  -ms-transform: translateY(-6px) rotate(-45deg);
  -o-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg);
}

JavaScript

$(function(){

	$(".navbar-toggle").click(function(){
            $(this).toggleClass("is-active"); 
	});
  
});