JSFiddle - React, Tailwind, and code Playground

HTML

<div class="px">
    <div>
        <div>Zoom: 150%</div>
        <div>Breakpoint: 400px</div>
    </div>
</div>
<div class="em">
    <div>
        <div>Zoom: 150%</div>
        <div>Breakpoint: 25em</div>
    </div>
</div>

CSS

html, body { padding: 0; margin: 0; }

.px, .em {
    color: white;
    font-family: -apple-system, BlinkMacSystemFont;
    font-size: 1.5rem;
    line-height: 1.15;
    padding: 2rem 4rem;
    margin-top: 2rem
}

.px {
    background: #38C172;
}
@media (min-width: 400px) {
    .px {
        background: #E3342F;
    }
}

.em {
    background: #38C172;
}
@media (min-width: 25em) {
    .em {
        background: #E3342F;
    }
}