JSFiddle - React, Tailwind, and code Playground

by viktorb

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">


<div id="page-wrapper">
  <div id="menu-wrapper" class="collapsed">
    <menu>
      <div id="logo">
        <svg id="svg-sothebys-logo" width="144" height="35" viewBox="0 0 144 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>SothebysLogo</title><desc>Created using Figma</desc><g id="Canvas" transform="translate(1044 -18)"><g id="SothebysLogo"><g id="s"><use xlink:href="#s_fill" transform="translate(-911.981 27.9675)" fill="#FFFFFF"/></g><g id="comma"><use xlink:href="#comma_fill" transform="translate(-918.234 25.489)" fill="#FFFFFF"/></g><g id="y"><use xlink:href="#y_fill" transform="translate(-937.044 28.5509)" fill="#FFFFFF"/></g><g id="b"><use xlink:href="#b_fill" transform="translate(-955.891 18)" fill="#FFFFFF"/></g><g id="e"><use xlink:href="#e_fill" transform="translate(-972.404 27.9667)" fill="#FFFFFF"/></g><g id="h"><use xlink:href="#h_fill" transform="translate(-993.299 18)" fill="#FFFFFF"/></g><g id="t"><use xlink:href="#t_fill" transform="translate(-1006.63 23.8564)" fill="#FFFFFF"/></g><g id="o"><use xlink:href="#o_fill" transform="translate(-1025.04 27.9667)" fill="#FFFFFF"/></g><g id="S"><use xlink:href="#S_fill" transform="translate(-1044 21.2028)" fill="#FFFFFF"/></g></g></g><defs><path id="s_fill" fill-rule="evenodd" d="M 5.44299 17.5699C 3.43618 17.5699 1.71642 17.2399 0.0359826 16.5856L -1.43337e-06 11.7844L 0.731428 11.7127C 2.70225 15.168 4.20109 16.4773 6.13676 16.4773C 7.85402 16.4773 8.91265 15.3864 8.91265 13.7137C 8.91265 11.821 6.97698 11.0943 4.89485 10.2576C 2.59346 9.27498 0.144776 8.18406 0.144776 5.16546C 0.144776 2.29187 2.70225 5.16557e-07 6.42882 5.16557e-07C 7.85234 5.16557e-07 9.86166 0.291693 10.8467 0.655058L 10.9563 4.98377L 10.2642 5.16546C 8.4733 2.21936 7.30586 1.09093 5.62292 1.09093C 4.09145 1.09093 3.13993 2.11019 3.13993 3.41863C 3.13993 5.31047 5.1116...

SCSS

body,
html {
  background: #333333;
}

#page-wrapper {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

#menu-wrapper {
  display: flex;
  height: 100vh;
  min-width: 254px;
  menu {
    display: flex;
    flex-direction: column;
    width: 200px;
    margin: 0;
    padding: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #C4C4C4 0%, #CFCFCF 33.15%, #C4C4C4 100%);
  }
  aside {
    width: 0px;
    padding: 8px;
    background-color: #E0E0E0;
  }
  &.collapsed {
    aside {
      animation: asideExpand 400ms 0ms ease-in-out;
      animation-fill-mode: forwards;
    }
    menu {
      animation: menuCollapse 200ms 150ms cubic-bezier(.38, .06, .96, .49);
      animation-fill-mode: forwards;
      #o_fill,
      #t_fill,
      #h_fill,
      #e_fill,
      #b_fill,
      #y_fill,
      #comma_fill,
      #s_fill {
        animation-fill-mode: forwards;
        animation-name: letterFadeToLeft;
        animation-duration: .3s;
        animation-timing-function: cubic-bezier(.38, .06, .96, .49);
      }
      #s_fill {
        animation-delay: 0ms;
      }
      #comma_fill {
        animation-delay: 10ms;
      }
      #y_fill {
        animation-delay: 40ms;
      }
      #b_fill {
        animation-delay: 80ms;
      }
      #e_fill {
        animation-delay: 90ms;
      }
      #h_fill {
        animation-delay: 140ms;
      }
      #t_fill {
        animation-delay: 180ms;
      }
      #o_fill {
        animation-delay: 250ms;
      }
      #svg-sothebys-logo {
        animation-fill-mode: forwards;
        animation-name: makeSBigger;
        animation-duration: 250ms;
        animation-timing-function: cubic-bezier(.67, 1.22, .9, .79);
        animation-delay: 420ms;
        transform-origin: left top;
      }
    }
  }
}

@keyframes menuCollapse {
  from {
    width: 200px;
  }
  to {
    width: 40px;
    padding: 16px 8px;
  }
}

@keyframes asideExpand {
  from {
    width: 0px;
  }
  to {
    width: 184px;
  }
}

@keyframes...