JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top">
    so what the hell <br><br> is going on here
</div>
        
<div id="work">
	<h2>no margins control this space between divs</h2>
	<h4>it's like magic or something</h4>
</div>
    
<div class="red">
    any clue what should I do?
</div>

CSS

html {
    margin: 0;
    padding: 0;
}

.top {
    background-color:yellow;
    text-align: center;
    margin: 0;
    padding:0;
}

#work {
    background-color:green;
    margin:0;
    padding:0;
    text-align: center;
}

div {
    margin:0;
    padding:0;
}

.red {
    text-align: center;
    background-color:red;
}