JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<p>Root text</p>

<div class="section">
    <p>Section text</p>
    <div class="container">
        <div><div><p>Block test</p></div></div>
        <div><div><p>Block test</p></div></div>
        <div><div><p>Block test</p></div></div>
        <div><div><p>Block test</p></div></div>
        <div><div><p>Block test</p></div></div>
    </div>
</div>

<span> </span>

CSS

html {
    font-family: Arial, sans-serif;
    font-size: 100%;
}

.section {
    font-size: 150%;
}

p {
    margin: 0;
    padding: 0.3125em 0.625em;
}

* + p {
    margin-top: 20px;
}

.container {
    font-size: 0.001px;
}
.container > * {
    font-size: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.625em;
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    background-color: rgba(0,0,0,0.1);
    vertical-align: top;
}

.container > * div {
    min-height: 200px;
    background-color: red;
}
.container > *:nth-child(1) {
    width: 66.6666666666%;
}
.container > *:nth-child(2) {
    width: 33.3333333333%;
}
.container > *:nth-child(3) {
    width: 25%;
}
.container > *:nth-child(4) {
    width: 25%;
}
.container > *:nth-child(5) {
    width: 50%;
}


span {
    font-family: courier, monospace;
    background-color: red;
    white-space: pre;
    
}