JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:yellow;" class="prevent-margin-collapse">
    <div style="margin-top:10px;background-color:black;color:white;">
        Why isn't the background color yellow inside my top margin?
    </div>
</div>

CSS

.prevent-margin-collapse:before,
.prevent-margin-collapse:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}