JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="bad">Bad w3schools!  Bad!</h1>
<div class="bad">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</div>

<h1>Good example...</h1>

<div class="parent">
    <div class="child">
        <div class="baby">
        </div>
    </div>
    <div class="child">
    </div>
</div>

CSS

h1.bad {
    color: red;
    background: white;
}
.bad {
    background: red;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
a {
    display:block;
    width:60px;
    background-color:#dddddd;
}

.parent {
    width: 150px;
    height: 100px;
    padding: 10px;
    background: yellow;
    overflow: hidden;
    
}
.child {
    float: left;
    width: 75px;
    height: 120px;
    margin: 10px;
    background: blue;
    
}
.baby {
    width: 200px;
    height: 25px;
    background: green;
}