JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class="main-content">
    <h1>Main content</h1>
    <ul>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
</section> <!-- .main-content -->

<aside class="side-bar">
    <h1>Sidebar</h1>
    <ul>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
        <li>Stuff</li>
    </ul>
</aside> <!-- .side-bar -->

CSS

/* ==================== *\
    GLOBAL
\* ==================== */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/*  READ THIS http://paulirish.com/2012/box-sizing-border-box-ftw/ */

body {
    background-color: black;
}

.main-content, .side-bar {
    padding: 1em;
}

/* ==================== *\
    01
\* ==================== */

@media (min-width: 0) { /* ====== */

   .main-content {
     width: 100%;
     float: left;
    
     background-color: white;
   }

   .side-bar {
     width: 100%;
     float: left;
        
     background-color: #f06;
   }

   

} /* ========================================================== */



/* ==================== *\
    02
\* ==================== */

@media (min-width: 60em) and (orientation:landscape) { /* ====== */

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

} /* ========================================================== */

JavaScript

// derekthomaswood.com