JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<h1>Inline-block with bigger first-letter</h1>
<p><span class="test">Test</span></p>
<p><span class="test">Testestestestestest</span></p>
<p><span class="test">Testestestestestesttestestestestestest</span></p>

<h1>+ floating to first-letter</h1>
<p><span class="test test2">Test</span></p>
<p><span class="test test2">Testestestestestest</span></p>
<p><span class="test test2">Testestestestestesttestestestestestest</span></p>

<h1>small size for first-letter</h1>
<p><span class="test test3">Test</span></p>
<p><span class="test test3">Testestestestestest</span></p>
<p><span class="test test3">Testestestestestesttestestestestestest</span></p>

<h1>small size, floating first-letter</h1>
<p><span class="test test2 test3">Test</span></p>
<p><span class="test test2 test3">Testestestestestest</span></p>
<p><span class="test test2 test3">Testestestestestesttestestestestestest</span></p>

CSS

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.test {
    background: rgba(0,0,0,0.15); /* For visualisation */
    display: inline-block;
}
.test:first-letter {
    font-size: 2em;
}
.test2:first-letter {
    float: left;
}
.test3:first-letter {
    font-size: .5em;
}

.test {
    -moz-animation: bugfix 0.001s;
}

JavaScript

// -_-
//
// Fx + inline-block + :first-letter with some font-size == OMGWTFBBQ