JSFiddle - React, Tailwind, and code Playground

by JoeQuery

HTML

<section id="bfc1">
    <p>BFC1</p>
    <div><p>BFC1</p></div>
    <div id="bfc2">
        <p>BFC2</p>
        <p>BFC2</p>
        <div id="bfc3">
            <p>BFC3</p>
            <p>BFC3</p>
        </div>
        <p>BFC2</p>
        <div><p>BFC2</p></div>
    </div>
    <p>BFC1</p>
    <div><p>BFC1</p></div>
</section>

CSS

#bfc1{
    background-color: orange;
    overflow: hidden;
}
#bfc2{
    background-color: black;
    overflow: hidden;
}
#bfc3{
    background-color: green;
    overflow: hidden;
}
div, p{
  margin-top: 20px;
  margin-bottom: 20px;
}
p {
    background-color: cyan;
}