JSFiddle - React, Tailwind, and code Playground

HTML

<p >Seating availability.</p>
<p ><div style="width: 10px; height: 10px; background-color: green; border: 0px;" ></div> There are available seats.</p>
<p ><div style="width: 10px; height: 10px; background-color: yellow; border: 0px;" ></div> Available seats are decreasing.</p>
<p ><div style="width: 10px; height: 10px; background-color: orange; border: 0px;" ></div> Less than 15% of seats available.</p>
<p ><div style="width: 10px; height: 10px; background-color: red; border: 0px;" ></div> There are no available seats.</p>

CSS

div {
    margin: 5px 10px 0 0 ;
    float:left;
}