JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="sidebar"></div>
<div class="container">
    <div class="topbar"></div>
    <div class="content"></div>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #484848;
  -webkit-text-stroke: 0.35px;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%; }

.topbar {
    height: 40px;
    background: green;
    width: 100%;
}

.sidebar {
    position: absolute;
    width: 200px;
    left: 0;
    z-index: 10;
    background: red;
}

.container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.push {
    position: absolute;
    left: 200px;
    right: 200px;
}

.content {
    position: absolute;
    overflow: auto;
    top: 40px;
    background: blue;
    width: 100%;
    bottom: 0;
}

JavaScript

$(".topbar").on("click", function() {
    $(".container").toggleClass("push");
});