JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContent">
    <div id="messages">
        <ul>
            <li>Remove the UL and LI, and the #messages div will be 0px from the top of the parent div #mainContent. Why?</li>
        </ul>
    </div>
</div>

CSS

div#mainContent {
    border:1px solid black;
    position:relative;
    width:500px;
    height:600px;
    margin-top:50px;
    margin-left:-250px;
    left:50%;
}
div#messages {
    width:499px;
    height:525px;
    top:0px;
    position:relative;
    background-color:red;
}