JSFiddle - React, Tailwind, and code Playground

by Stephen Herd

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
      <h1>Header in h1</h1>
    </header>
    <nav>
      <h2>Navigation</h2>
      <ul>
        <li><a href="#">Menu Option 1</a></li>
        <li><a href="#">Menu Option 2</a></li>
        <li><a href="#">Menu Option 3</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <h2>Section</h2>
        <article>
          <h2>Article #1</h2>
          <p>This is the first article. This is <mark>highlighted</mark> text. An article can be almost ant text/image combination that contains related content.</p>
        </article>
        <article>
          <h2>Article #2</h2>
          <p>This is the second article. Articles could be blog posts, comments, reviews, etc.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </article>
      </section>
      <aside>
        <h2>Aside</h2>
        <figure>
          <img src="https://bhcwebdev.com/articles/images/HTML5PageLayout.jpg" alt="My Image Alt Text">
          <figcaption>HTML5 Layout Image</figcaption>
        </figure>
      </aside>
    </main>
    <footer>Footer - Copyright &copy;</footer>
  </body>

</html>

CSS

* {
  margin: 0;
  box-sizing: border-box;
}

header {
  color: WhiteSmoke;
  background-color: #c00;
  border: thin solid white;
  padding: .5em;
}

nav {
  color: WhiteSmoke;
  background-color: Orange;
  border: thin solid white;
  padding: .5em;
}

main {
  display: table;
  width: 100%;
}

section {
  color: WhiteSmoke;
  background-color: gold;
  border: thin solid white;
  padding: 5px;
  display: table-cell;
}

article {
  color: WhiteSmoke;
  background-color: YellowGreen;
  border: thin solid green;
  border-radius: 5px;
  padding: .5em;
  margin: .5em;
}

aside {
  color: WhiteSmoke;
  background-color: blue;
  border: thin solid white;
  padding: .5em;
  display: table-cell;
}

img {
  max-width: 80%;
}

footer {
  color: WhiteSmoke;
  background-color: purple;
  border: thin solid white;
  clear: both;
  text-align: center;
  height: 2em;
  line-height: 2em;
}