JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<div class="block">Heading!</div>
<div class="block">Subheading!</div>
<div class="block main">This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. This is some content. </div>
<div class="block aside">Hello. I'm an aside.</div>
<div class="block sidebar">
    Hello, I'm a sidebar!
    <div class="block">Sidebar item 1.</div>
    <div class="block">Sidebar item 1.</div>
    <div class="block">Sidebar item 1.</div>
</div>
<div class="block footer">Footer</div>

CSS

/* mobile first! */
.block {
    border: green;
    width: 100%;
    background-color: lightpink;
    padding: 5px;
    margin: 5px 0;
}

/* desktop will go below */
@media (min-width: 640px) {
  .main {
    width: 58%;
    float: left;
  }
  .sidebar,
  .aside {
    width: 38%;
    float: right;
  }
  .footer { 
    clear: both;
    width: 100%;
  }
}