JSFiddle - React, Tailwind, and code Playground

by James Kyle

HTML

<foil>
    <bagel>
        <bacon></bacon>
        <tomato></tomato>
        <hummus></hummus>
        <sprouts></sprouts>
        <avocado></avocado>
    </bagel>
</foil>

CSS

foil, bagel, bacon, tomato, hummus, sprouts, avocado {
    display: block;
}

foil {
    width: 200px;
    padding: 5px;
    background: silver;
    border-radius: 45px;
}

bagel {
    padding: 40px 0;
    background: orange;
    border-radius: 40px;
}

bacon {
    height: 10px;
    background: brown;
}

tomato {
    height: 15px;
    background: red;
}

hummus {
    height: 5px;
    background: tan;
}

sprouts {
    height: 10px;
    background: green;
}

avocado {
    height: 5px;
    background: lightgreen;
}