JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="container">
    <div class="row">
        <div class="box full">
            Vel? Vut scelerisque. Platea, placerat tortor, risus, enim platea amet dignissim, auctor et ac et! Ac? Penatibus ac dignissim a! Amet tincidunt cum non aliquam nascetur velit dis enim, mattis, natoque elementum pulvinar penatibus nec, ut et tristique facilisis proin aenean porttitor! Ac lectus, integer turpis habitasse dictumst. 
        </div>
    </div>
    <div class="row">
        <div class="box half">
            Vel? Vut scelerisque. Platea, placerat tortor, risus, enim platea amet dignissim, auctor et ac et! Ac? Penatibus ac dignissim a! Amet tincidunt cum non aliquam nascetur velit dis enim, mattis, natoque elementum pulvinar penatibus nec, ut et tristique facilisis proin aenean porttitor! Ac lectus, integer turpis habitasse dictumst.
        </div>
        <div class="box half">
            Vel? Vut scelerisque. Platea, placerat tortor, risus, enim platea amet dignissim, auctor et ac et! Ac? Penatibus ac dignissim a! Amet tincidunt cum non aliquam nascetur velit dis enim, mattis, natoque elementum pulvinar penatibus nec, ut et tristique facilisis proin aenean porttitor! Ac lectus, integer turpis habitasse dictumst.
        </div>
    </div>
    <div class="row">
        <div class="box third">
            Vel? Vut scelerisque. Platea, placerat tortor, risus, enim platea amet dignissim, auctor et ac et! Ac? Penatibus ac dignissim a! Amet tincidunt cum non aliquam nascetur velit dis enim, mattis, natoque elementum pulvinar penatibus nec, ut et tristique facilisis proin aenean porttitor! Ac lectus, integer turpis habitasse dictumst.
        </div>
        <div class="box third">
            Vel? Vut scelerisque. Platea, placerat tortor, risus, enim platea amet dignissim, auctor et ac et! Ac? Penatibus ac dignissim a! Amet tincidunt cum non aliquam nascetur velit dis enim, mattis, natoque elementum pulvinar penatibus nec, ut et tristique facilisis proin aenean porttitor!...

CSS

body {
    font: 100.01% Arial,sans-serif;
}

#container {
    width: 90%;
    margin: 1em auto;
    font-size: 76%;
}

div.row {
    background: #eee;
    overflow: hidden;
    margin-bottom: 1em;
}

div.box {
    float: left;
}



.full {
    width: 100%;
}

.half {
    width: 50%;
}

.third {
    width: 33%;
}

.fourth {
    width: 25%;
}