JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<body cz-shortcut-listen="true">
  <div id="___gatsby">
    <div style="outline: currentcolor none medium;" tabindex="-1" id="gatsby-focus-wrapper">
      <fieldset>
        <legend align="center">v1</legend>
        <p></p>
        <header>
          <div>
            <a aria-current="page" class="" href="/">Articles</a>
            <a href="/about">About</a>
          </div>
        </header>
        <div></div>
        <footer>
          <div>Footer</div>
        </footer>
      </fieldset>
    </div>
    <div id="gatsby-announcer" style="position: absolute; top: 0px; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px none;" aria-live="assertive" aria-atomic="true"></div>
  </div>
</body>

CSS

html, body {
    height: 100%;
    background-color: 
    #000000;
    margin: 0;
    display: flex;
    flex-direction: column;
}

fieldset {
    margin: 10px;
    padding: 10px;
    border: 1px solid 
    white;
    
}

fieldset legend {
    color: 
    #FFFFFF;
}