JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h1>Марджины заголовков и абзацев не схлопываются с марджинами дивов</h1>
    <p>Но марджины самих дивов схлопываются</p>
</div>

<div>
    <h1>Это потому, что сами дивы в одном блочном контексте (элемента &lt;body&gt;)</h1>
    <p>А вот их содержимое &mdash; уже в отдельном</p>
</div>

CSS

div { margin: 20px; background: #ddd; overflow: hidden; }

h1 { margin: 40px 10px; background: #fcc; font-size: 1.5em; }

p { margin: 30px 10px; background: #cfc; }