JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<div class="w320">
    <h1>320px</h1>
<div class="container-6">
    <div class="col col-2"></div>
    <div class="col col-4"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-6"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
</div>
</div>

<div class="w480">
<h1>480px</h1>
<div class="container-9">
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
</div>
</div>

<div class="w480">
<h1>480px</h1>
<div class="container-8">
    <div class="col col-4"></div>
    <div class="col col-4"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
    <div class="col col-1"></div>
</div>
</div>

CSS

body {
    background: #222;
    font: 15px/18px arial,sans-serif;
    text-align: center;
}
.w320 {
    color: #fff;
    width: 320px;
    min-height: 18px;
    background: #333;
    margin: 0 auto;    
}

.w480 {
    color: #fff;
    width: 480px;
    min-height: 18px;
    background: #333;
    margin: 0 auto;    
}

.col {
    display: inline;
    float: left;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    background: #f0f;
    min-height: 18px;
    border-top: 9px solid #333;
    border-bottom: 9px solid #333;
}

.container-6 {
    overflow: hidden;
    width: 300px;
    margin: 0 auto;
}
.container-9 {
    overflow: hidden;
    width: 450px;
    margin: 0 auto;
}
.container-8 {
    overflow: hidden;
    width: 400px;
    margin: 0 auto;
}


.col-1 {
    width: 40px;
}

.col-2 {
    width: 90px;
}

.col-3 {
    width: 140px;
}

.col-4 {
    width: 190px;
}

.col-6 {
    width: 290px;
}