JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div class="container">
    <div class="row row-sm row-header">
        <div class="col col-8">
            <div class="content">Col 1 Row 1</div>
        </div>
        <div class="col col-4">
            <div class="content">Col 2 Row 1</div>
        </div>
    </div>
    <div class="row row-lg row-main">
        <div class="col col-8 col-main">
            <div class="content-main">
                <div class="feedback">FEEDBACK</div>
                <div class="uploader">
                    <div class="centered">
                        <div>Col</div>
                        <div>1 Row 2</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col col-4 col-side">
            <div class="content-side">
                <div class="layout">Col 2 Row 2.1</div>
                <div class="side-footer">Col 2 Row 2.2</div>
            </div>
        </div>
    </div>
</div>

CSS

html {
     box-sizing: border-box;
 }
 *, *:before, *:after {
     box-sizing: border-box;
 }
 .container {
     width: 90%;
     border: 1px solid black;
     margin: 20px auto;
 }
 .row-header {
     background-color: lightcoral;
 }
 .col-main {
     background: lightyellow;
 }
 .col-side {
     background: lightgreen;
 }
 .row::after {
     clear: both;
 }
 .row:after, .row:before {
     display: table;
     content:" ";
 }
 .col {
     float: left;
 }
 .col-8 {
     width: 66.6%;
 }
 .col-4 {
     width: 33.4%;
 }
 .content-main {
     padding: 10px;
     height: 100%;
 }
 .feedback {
     margin-bottom: 10px;
 }
 .uploader {
     border: 1px dashed #ccc;
     padding: 10px;
     height: 100%;
 }
 .row-main, .row-side, .col-main, .col-side {
     height: 85vh;
     height: .85vh\9\0;
 }
 .content-side {
     padding: 10px;
     height: 85vh;
     height: .85vh\9\0;
 }
 .layout {
     height: 90%;
 }
 .centered {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     text-align: center;
 }