Lean Burger Menu using Tailwind

lean-burger.html

<!-- Uses group-hover for demo but could be toggled with an .active class, :group-active, or inline using your favorite js flavor -->
<button class="group text-white w-10 h-10 relative focus:outline-none bg-blue-500 rounded-md">
  <div class="block w-7 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
    <hr aria-hidden="true" class="block absolute h-0.5 w-7 bg-current transform transition duration-500 ease-in-out -translate-y-2 group-hover:rotate-45 group-hover:-translate-y-0">
    <hr aria-hidden="true" class="block absolute  h-0.5 w-7 bg-current   transform transition duration-500 ease-in-out group-hover:opacity-0">
    <hr aria-hidden="true" class="block absolute  h-0.5 w-7 bg-current transform  transition duration-500 ease-in-out translate-y-2 group-hover:-rotate-45 group-hover:-translate-y-0">
  </div>
</button>