JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div id="wrapper">
  <div id="shadow"></div>

  <div id="main">
    [MAIN]
  </div>

  <div id="sub">
    [SUB]
  </div>

  <div id="content">

    <div class="toggle">
      <div class="toggle-main">&#9776;</div>
    </div>

    <div class="sub">
      [SUB]
    </div>

    <div class="content">
      [CONTENT]
    </div>

  </div>
</div>

SCSS

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
}

// wrapper
#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flext-start;
  // tablet
  @media(max-width: 1024px) {  
    flex: 1 60%;
  }
  // mobile shadow
  #shadow {
    display: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10;
    background: rgba(0,0,0,.5);
  }
  #main {
    flex: 1 20%;
    height: 100%;
    background-color: #fff;
    transition: all .2s linear;
    // toggle class
    &.open {
      left: 0 !important;
    }
    // tablet
    @media(max-width: 1024px) {  
      flex: 1 100%;
      position: fixed;
      left: -270px;
      height: 100%;
      z-index: 20;
      width: 270px;
    }
  }
  #sub {
    flex: 1 20%;
    height: 100%;
    background-color: #e5e5e5;
    transition: all .2s linear;
    // toggle class
    &.open {
      right: 0 !important;
    }
    // mobile
    @media(max-width:678px) {
      display: none;
    }
    // tablet
    @media(max-width: 1024px) {   
      flex: 1 40%;
    }
  }
  #content {
    flex: 1 80%;
    height: 100%;
    .toggle {
      cursor: pointer;
      display: none;
      // tablet
      @media(max-width: 1024px) {
        display: block
      }
    }
    .sub {
      display: none;
      // mobile
      @media(max-width:678px) {
        display: block;
      }
      // tablet
      @media(max-width: 1024px) {}
    }
  }
}

JavaScript

jQuery(function($) {
	$('.toggle-main').click(function(){
  	$('#main').toggleClass('open');
    $('#shadow').fadeToggle(200);
  });
  $('#shadow').click(function(){
  	$('#main').removeClass('open');
    $(this).fadeToggle(200);
  });
});