JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<!-- HEADER -->
<nav></nav>
<header>
    <nav></nav>
</header>

<nav></nav>

<!-- ARTICLE -->
<article>
    <nav></nav>
    <header></header>
    <article></article>
    <footer></footer>
</article>

<nav></nav>

<!-- FOOTER -->
<footer>
    <nav></nav>
    
</footer>

<nav></nav>

CSS

html {
    
}

body {
    min-width: 280px;
    width: 80%;
    max-width: 900px;
    
    margin: 0 auto;
    padding: 30px 20px;
}

* > *:first-child {margin-top:    0 !important}
* > *:last-child  {margin-bottom: 0 !important}

nav, header, article, footer {
    border: 3px solid red;
    margin: 10px 0;
}

header {
    
}

article {
    
}

footer {
    
}