JSFiddle - React, Tailwind, and code Playground

by justinbrown

HTML

<div class="left">
    <div class="item"><p class="title">top grid</p><div class="grid"></div></div>
    <div class="item"><p class="title">ARCYBER</p><div class="grid"></div></div>
</div>
<div class="right">
<header>ARCYBER Common I &amp; W</header>
<div class="cells">
<div class="cell"><div class="histogram"></div><p class="title">Failed Missile Launch</p></div>
<div class="cell"><div class="histogram"></div><p class="title">Political Reorganization</p></div>
<div class="cell"><div class="histogram"></div><p class="title">Test site excavation</p></div>
<div class="cell"><div class="histogram"></div><p class="title">Increased radiation levels above normal</p></div>
<div class="cell empty"></div>
<div class="cell"><div class="histogram"></div><p class="title">Officials move to test site</p></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
<div class="cell empty"></div>
</div>
</div>

SCSS

html, body {
    background-color: #DEDEDE;
    height: 100%;
    position: relative;
    width: 100%;
}

.left {
    background-color: #999;
    cursor: pointer;
    text-align: center;
    
    @media screen and (max-width: 28.75em) {
        display: none;
    }

    @media screen and (min-width: 28.75em) and (max-width: 40.5em) {
        -moz-border-radius-bottomright: 8px;
        -moz-border-radius-topright: 8px;
        -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3), inset 0 0 5px rgba(0,0,0,0.8);
        bottom: 10%;
        top: 10%;
        left: -90px;
        position: absolute;
        width: 100px;
        z-index: 10001;    
    }

    @media screen and (min-width: 40.5em) {
        height: 100%;        
        float: left;
        width: 10%;
    }

    .item {
        margin: 0.4em 0.2em;
    
        @media screen and (min-width: 28.75em) and (max-width: 40.5em) {
            margin-right: 1em;
        }

        .title {
            font-size: 0.8em;            
            margin-bottom: 0.2em;
        }

        .grid {
            background-color: white;
            border: 2px solid red;
            height: 50px;
        }
    }
}

.right {
    @media screen and (min-width: 40.5em) {
        float: left;
        width: 90%;    
    }
}

header {
    padding: 0.5em;
    
    @media screen and (max-width: 28.75em) {

    }

    @media screen and (min-width: 28.75em) and (max-width: 40.5em) {
        
    }

    @media screen and (max-width: 40.5em) {
        -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.3);
        background-image: -moz-linear-gradient(top, #333, #666);
        color: white;
        margin-bottom: 1em;
        text-align: center;
    }
}


.cells {
    @media screen and (min-width: 28.75em) and (max-width: 40.5em) {
        padding-left: 1em;    
    }
}

.cell {
    background-color: #464c86;
    cursor: pointer;
    
    @media screen and (max-width: 28.75em) {
        -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
       ...

JavaScript

$(function() {
  function onResize() {     
    $('body').fadeIn('slow');
  }

  var resizeTimer;
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    $('body').hide();
    resizeTimer = setTimeout(onResize, 1000);
  });

    $('.left').toggle(function() {
        console.log("clicked");
        $(this).animate({left: 0});
    }, function() {
        $(this).animate({left: '-90px'});
    });
    
  $('.cell').click(function() {
      //$('.cells').animate({ opacity: 0 });
      
      cells = $('.cell');
          
      height = cells.first().height();
      width = cells.first().width();
      cells.animate({ height: 0, width: 0, opacity: 0 });
      cells.animate({ height: height, width: width, opacity: 1 })
  });
});