JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<h1>heading</h1>
<p>para, no class</p>
<h1>heading</h1>
<p class="foo">para, with class</p>
<h1>heading</h1>
<p class="bar">para, with class, no space</p>
<h1>heading</h1>
<nav class="foo">nav, with class</nav>
<h1>heading</h1>
<nav class="bar">nav, with class, no space</nav>
<h1>heading</h1>
<section>section</section>
<h1>heading</h1>
<article>article</article>
<h1>heading</h1>
<aside>aside</aside>
<h1>heading</h1>
<nav>nav</nav>

CSS

h1 { margin: 0 0 20px; padding: 10px 0 0; }
p { margin: 0 0 20px; }
nav, section, article, aside { display: block; margin: 0 0 20px; }
h1 + p.foo { margin-top: -20px; }
h1+p.bar{ margin-top: -20px; }
h1 + nav.foo { margin-top: -20px; }
h1~nav.bar { margin-top: -20px; }

h1+section,h1+article,h1+aside { margin-top: -20px; }