JSFiddle - React, Tailwind, and code Playground

by bryandowning

HTML

<div id="menu-trigger">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="br"></div>
</div>

CSS

#menu-trigger {
  position: relative;
  width: 68px;
  height: 68px;
  cursor: pointer;
}

.tl, .tr, .br {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.tl {
  top: 0;
  left: 0;
  background-color: #C21313;
}

.tr {
  top: 0;
  right: 0;
  background-color: #E2AB1E;
}

.br {
  bottom: 0;
  right: 0;
  background-color: #1B1A18;
}

.open .tl,
.open .tr, 
.open .br {
  background-color: #000;
  border-radius: 0;

  height: 14px;
  width: 70px;
}

.open .tl {
  top: 27px;
  left: -1px;
  transform: rotate(45deg);
}

.open .tr {
  top: 27px;
  right: -1px;
  transform: rotate(-45deg);
}

.open .br {
  bottom: 27px;
  right: -1px;
  transform: rotate(45deg);
}

JavaScript

(function(){
  var menuTrigger = document.getElementById('menu-trigger')

  menuTrigger.addEventListener('click', function(e) {
    e.preventDefault()
    menuTrigger.classList.toggle('open')
  })
}())