JSFiddle - React, Tailwind, and code Playground

HTML

<div id="horizontal_bar">
    <ul>
        <li><a href="">HTML</a>
        </li>
        <li><a href="">CSS</a>
        </li>
        <li><a href="">JAVASCRIPT</a>
        </li>
        <li><a href="">SQL</a>
        </li>
        <li><a href="">PHP</a>
        </li>
        <li><a href="">jQuery</a>
        </li>
        <li><a href=""><img src="images/search2.png" alt="search"/></a>
        </li>
    </ul>
</div>
<div id="content">
    <p>Hello</p>
</div>

CSS

* {
    color: white;
    margin: 0;
    padding: 0;
}
#horizontal_bar {
    background-color: black;
    height:34px;
    overflow: visible;
    /* When I change it to overflow: visible; hiddenthe webpage turns white, why is it the case? */
    margin-top: 2em;
}
#horizontal_bar ul li {
    list-style-type: none;
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
}
#horizontal_bar ul li img {
    height: 12px;
}
#horizontal_bar ul li a {
    text-decoration: none;
    padding: 5px 20px;
    height: 12px;
}
a:focus, a:hover {
    background-color: gray;
}
#content {
    clear: left;
}