JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<h1 class="blocks"><span class="word">Fight,</span><span class="space"> </span><span class="word">before</span><span class="space"> </span><span class="word">until</span><span class="space"> </span><span class="word">=</span><span class="space"> </span><span class="word">too</span><span class="space"> </span><span class="word">late.</span></h1>
<p class="blocks"><span class="word">Lorem</span><span class="space"> </span><span class="word">ipsum</span><span class="space"> </span><span class="word">dolor</span><span class="space"> </span><span class="word">sit</span><span class="space"> </span><span class="word">amet,</span><span class="space"> </span><span class="word shy">conset&shy;</span><span class="word">etur</span><span class="space"> </span><span class="word shy">sadip&shy;</span><span class="word">scing</span><span class="space"> </span><span class="word">elitr,</span><span class="space"> </span><span class="word">sed</span><span class="space"> </span><span class="word">diam</span><span class="space"> </span><span class="word shy">non&shy;</span><span class="word">umy</span><span class="space"> </span><span class="word">eirmod</span><span class="space"> </span><span class="word">tempor</span><span class="space"> </span><span class="word shy">invi&shy;</span><span class="word">dunt</span><span class="space"> </span><span class="word">ut</span><span class="space"> </span><span class="word">labore</span><span class="space"> </span><span class="word">et</span><span class="space"> </span><span class="word shy">dol&shy;</span><span class="word">ore</span><span class="space"> </span><span class="word">magna</span><span class="space"> </span><span class="word shy">ali&shy;</span><span class="word">quyam</span><span class="space"> </span><span class="word">erat,</span><span class="space"> </span><span class="word">sed</span><span class="space"> </span><span class="word">diam</span><span class="space"> </span><span class="word shy">vol&shy;</span><span class="word...

CSS

@import url(http://fonts.googleapis.com/css?family=Bitter:400,700&subset=latin,latin-ext);

body {  margin:1em; }
h1, p { font:bold 'Bitter', serif; }
.blocks span { display:inline-block; line-height:1; }
.blocks span.space { display:inline; }
span.word { padding:0 .125em 0 .125em; background:#999; color:#fff; }
span.shy { background:#c99; }
.blocks span.word + span.word, .blocks span.word + span.shy { margin:0; padding:0; border-bottom:1px solid red; }