JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    This is a block level element. It will take up a whole line.
</div>

<p>
    Paragraphs inside a p tag are also block level elements.
</p>

<span class="span-purple">
    This is a span, which is an inline element.
</span>

<span class="span-blue">
    If I put two spans next to each other, they will float together because they are inline elements.
</span>

CSS

div, p {
    border: 1px solid orange;
}

.span-purple {
    color: purple;
    border: 1px solid purple;
}

.span-blue {
    color: blue;
    border: 1px solid blue;
}