JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div class="container yo">
    <div class="top yo">
        <div class="block floatl yo"><blockquote class="yo"></blockquote></div>
        <div class="block floatl yo"><blockquote class="yo"></blockquote></div>

        <div class="block floatl yo clear">
            <div class="width yo">
                <div class="height yo"></div>
                <br class="clear" />
            </div>                                    
        </div>
        <div class="block floatl yo">
            <div class="width yo">
                <div class="height yo"></div>
                <br class="clear" />
            </div>   
        </div>
        <br class="clear" />
    </div>
    <div class="bottom yo">
        <form>
            <button><span class="letext">S</span></button>
        </form>
    </div>
    <br class="clear" />
</div>

CSS

.container {
    width: 100%;
    text-align: center;   
}

.top, .bottom {
    width: 100%;
    text-align: center;    
}

.letext {
    font-size: 36px;
    margin: auto;        
}

*{
    padding: 5px;   
    margin: 0;        
}

.block {
    width: 235px;   
}

.floatl {
   float: left;        
}


.floatr {
   float: right;        
}

.clear {
    clear: both;       
}

.width {
    width: 160px;
}

.height {
    height: 80px;
}

JavaScript

var els = document.getElementsByTagName('*');

// Probably make all divs visible
for(var i = els.length; i--;){
    els[i].style.backgroundColor = 'rgb(' + rando() + ',' + rando() + ',' + rando() + ')';
    if((' ' + els[i].className + ' ').match(' yo ')){
        var text = document.createTextNode(els[i].nodeName + ': ' + (' ' + els[i].className + ' ').replace(' yo ', ' '));
        els[i].insertBefore(text, els[i].firstChild);
        els[i].insertBefore(document.createElement('br'), text.nextSibling);
    }
}

function rando(){
    return Math.floor(Math.random()*256)
};