JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="base">
   <div class="menu">
      <div class="icon">
         <div class="bar"></div>
      </div>
   </div>
   <div class="icons">
      <i class="fa fa-user" aria-hidden="true"></i>
      <i class="fa fa-calendar-o" aria-hidden="true"></i>
      <i class="fa fa-tachometer" aria-hidden="true"></i>
   </div>
   <div class="section">
      <div class="cover1">
         <div class="cover2">
            <a class="content" href="#calender"></a>
         </div>
      </div>
   </div>
   <a class="section-static top" href="#profile"></a>
   <a class="section-static bottom" href="#dashboard"></a>
</div>

SCSS

$m: #21264B;
$iconmargin: 35px;
//Took about 100 more lines than I expected
body {
   background-color: $m;
   overflow-x:hidden;
   .base {
      z-index: 90;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: #FFFFFF;
      width: 98px;
      height: 98px;
      transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1);
      border-bottom-right-radius: 400px;
      //overflow:hidden;
      .menu {
         z-index: 100;
         background-color: #FFFFFF;
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100px;
         height: 100px;
         border-bottom-right-radius: 200px;
         cursor: pointer;
         transition: all 1s cubic-bezier(0.50, -0.75, 0.05, 1), background-color 1s ease;
         .icon {
            position: absolute;
            width: 25px;
            height: 25px;
            top: 50%;
            left: 50%;
            transform: translate(-100%, -100%);
            &:before,
            &:after {
               content: '';
               transform: rotate(0deg);
               transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s;
            }
            .bar,
            &:before,
            &:after {
               position: absolute;
               height: 5px;
               left: 0px;
               right: 0px;
               border-radius: 5px;
               background-color: $m;
            }
            .bar {
               transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s;
               opacity: 1;
               top: 10px;
            }
            &:before {
               top: 0px;
            }
            &:after {
               top: initial;
               top: 20px;
            }
         }
      }
      .icons {
         z-index: 98;
         position: absolute;
         top:0px;
         left:0px;
         >* {
            position: absolute;
            font-size:40px;
            color:$m;
     ...

JavaScript

$(".menu").click(function(){
   $(this).parent().toggleClass("close");
});

//Based on: https://dribbble.com/shots/3377940-Home-Budget-App-Interactions