JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<div class="global red">

		<div class="sub">Hacque adfabilitate <span class="emphasis">red</span>confisus cum eadem postridie</div>
		<div class="sub">Ob haec et huius modi multa, quae cernebantur in</div>
		<div class="sub">Quid enim tam absurdum quam delectari multis</div>
    <div class="sub green" >Post    <div class="block">Bwaaah</div>quorum <span class="emphasis">green</span> nihilo lenius ferociens Gallus</div>
		<div class="sub">Itaque    <div class="block">Bwaaah</div>tum Scaevola cum in eam ipsam mentionem</div>
		<div class="sub">Ideoque   <div class="block">Bwaaah</div> <span class="emphasis">red</span> neminem aliquando ob haec vel</div>
		<div class="sub">Quare talis improborum consensio non modo</div>
		<div class="sub green">Emensis <span class="emphasis">green</span>itaque
            
            <div class="block">Bwaaah</div>
            difficultatibus <div class="blue" >Post quorum <span class="emphasis">blue</span> nihilo lenius    <div class="block">Bwaaah</div>ferociens Gallus</div> multis et <span class="emphasis">green</span>nive</div>
		<div class="sub">Et Epigonus <span class="emphasis">red</span> amictu tenus philosophus, ut</div>
		<div class="sub">Constituendi autem sunt qui sint in amicitia fines</div>
		
</div>

CSS

div {
    border: solid 1px black;
    margin: 2px;
    color:silver;
}
.emphasis {
    font-weight:bold;
}
.block {
   width:64px;
    height:64px;
color:white;
}
.red .emphasis {
    color:red;
}

.green .emphasis {
    color:green;
}
.blue .emphasis {
    color:blue;
}

.red .block {
    background-color:red;
}

.green .block {
    background-color:green;
}
.blue .block {
    background-color:blue;
}