JSFiddle - React, Tailwind, and code Playground

by Boris Šuška

HTML

<p>
    <span class="yellow">Line above the inline default</span>
    <br/>Text before <span class="outer-offset inner-offset blue">Inline by default</span> Text after
    <br/> <span class="yellow">Line under the inline default</span>
</p>

<span class="block outer-offset inner-offset green">
    Block
</span>

<div class="outer-offset inner-offset blue">
    Block by default
</div>
<div>
    <span class="yellow">Line above the inline</span>
    <br/>Text before <div class="inline outer-offset inner-offset green">inline</div> Text after
    <br/> <span class="yellow">Line under the inline</span> <div class="inline-block outer-offset inner-offset green">inline-block</div>

CSS

.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
.outer-offset {
    margin: 10px;
}
.inner-offset {
    padding: 10px;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}