JSFiddle - React, Tailwind, and code Playground

by metulev

HTML

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<mgt-mock-provider></mgt-mock-provider>

<div class="root">
  <div class="navbar">
    <mgt-login></mgt-login>
  </div>
  
  <div class="content">

  </div>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.root {
  height: 100vh;
}

.navbar {
  display: block;
  padding-top: 8rem;
  width: 20rem;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  overflow: auto;
  transition: all 500ms;
  background-color: lightgrey;
  font-weight: 350;
  transform: translateX(0%);
}

.content {
  height: 100vh;
  width: 100vw;
  background: red;
}