JSFiddle - React, Tailwind, and code Playground
by Tan
HTML
<header>Semantic HTML5 - Header<nav>Navigation</nav></header>
<main>Main
<nav>Navigation <a href="#a-section">link</a> </nav>
<article>
Article
<section id="a-section">A Section</section>
<section>A Section</section>
<section>A Section</section>
<aside>Related to Article</aside>
</article>
<aside>Related to Main</aside>
</main>
<footer>Footer<nav>Navigation</nav></footer>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>CSS
header {background-color:#eee;margin:0 0 20px 0;}
main {background-color:#ddd;}
article {background-color:#eee;margin:20px 0 20px 0;}
footer {background-color:#eee;margin:20px 0 0 0;}
aside {padding:5px;border:1px solid #000;margin:10px 0 10px 10px;}
section {padding:5px;border:1px solid #000;margin:5px;}
section::before { display: block; content: ""; margin-top: -120px; height: 120px; visibility: hidden; pointer-events: none;}
@media screen and (max-width:768px){ section::before {margin-top: -50px; height: 50px; } }