JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div class="container">
    <div class="row">
        <div class="p_4 bg-red">Hello, world.</div>
        <div class="p_12 bg_lime">This is some more text.</div>
    </div>
    <div class="row">
        <label class="p_4">Name:</label>
        <input class="p_12" />
    </div>
    <div class="row">
        <div class="p_1_12">a</div>
        <div class="p_1_12">b</div>
        <div class="p_1_12">a</div>
        <div class="p_1_12">b</div>
        <div class="p_1_12">a</div>
        <div class="p_1_12">b</div>
        <div class="p_1_12">a</div>
        <div class="p_1_12">b</div>
        <div class="p_1_12">a</div>
        <div class="p_1_12">b</div>
        <div class="p_1_12">a</div>
        <div class="p_1_12 bg_lime" style="width:8.3326%">c</div>
    </div>
</div>

CSS

.container {
    max-width:960px;
    margin:0 auto;
    zoom:1;
}
.container::before, .container::after, .row::before, .row::after {
    display: table;
    content: "";
    zoom: 1;
}
.container::after, .row::after {
    clear: both;
}
.p_1 {
    width:6.25%;
}
.p_1_12 {
    width:8.3334%;
}
.p_1_8, .p_2 {
    width:12.5%;
}
.p_1_6, .p_2_12 {
    width:16.6667%;
}
.p_3 {
    width:18.75%;
}
.p_1_4, .p_2_8, .p_3_12, .p_4 {
    width:25%;
}
.p_5 {
    width:31.25%;
}
.p_1_3, .p_2_6, .p_4_12 {
    width:33.3334%;
}
.p_3_8, .p_6 {
    width:37.5%;
}
.p_5_12 {
    width:41.6667%;
}
.p_7 {
    width:43.75%;
}
.p_1_2, .p_2_4, .p_3_6, .p_4_8, .p_6_12, .p_8 {
    width:50%;
}
.p_9 {
    width:%56.25;
 }
.p_7_12 {
    width:58.3333%;
}
.p_5_8, .p_10 {
    width:62.5%;
}
.p_2_3, .p_4_6, .p_8_12 {
    width:66.6667%;
}
.p_11 {
    width:68.75%;
}
.p_3_4, .p_6_8, .p_9_12, .p_12 {
    width:75%;
}
.row>.p_13 {
    width:81.25%;
}
.p_5_6, .p10_12 {
    width:83.3333%;
}
.p_7_8, .p_14 {
    width:87.5%;
}
.p_11_12 {
    width:91.6667%;
}
.p_15 {
    width:93.75%;
}
.row>.p_1, .row>.p_2, .row>.p_3, .row>.p_4, .row>.p_5, .row>.p_6, .row>.p_7,
.row>.p_8, .row>.p_9, .row>.p_10, .row>.p_11, .row>.p_12, .row>.p_13,
.row>.p_14, .row>.p_15, .row>.p_1_8, .row>.p_2_8, .row>.p_3_8, .row>.p_4_8,
.row>.p_5_8, .row>.p_6_8, .row>.p_7_8, .row>.p_1_4, .row>.p_2_4, .row>.p_3_4,
.row>.p_1_12, .row>.p_2_12, .row>.p_3_12, .row>.p_4_12, .row>.p_5_12,
.row>.p_6_12, .row>.p_7_12, .row>.p_8_12, .row>.p_9_12, .row>.p_10_12,
.row>.p_11_12, .row>.p_1_6, .row>.p_2_6, .row>.p_3_6, .row>.p_4_6,
.row>.p_5_6, .row>.p_1_3, .row>.p_2_3, .row>.p_1_2 {
    float:left;
    padding:10px;
    box-sizing:border-box;
}
input.p_12:first-line {
    border:1px solid magenta;
}
.bg-red {
    background-color:red;
}
.bg_lime {
    background-color:lime;
}