JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<header>
  <nav>
    <ul>
      <li><a href="/">Index</a></li><li><a href="/writing">Writing</a></li><li><a href="/colophon">Colophon</a></li>
    </ul>
  </nav>
  <h1>Micha&euml;l P. van de Weerd</h1>
</header>
<main>
  <header>
    <nav>
      <ul><li><a hreflang="en" href="/cs/">Computing Science</a></li><ul><li><a>Genetic Algorithms</a></li></ul></ul>
    </nav>
  </header>
  <section>
    <article id="cs:genetic-algorithms">
      <header>
        <h1>Genetic Algorithms</h1>
        <p><a rel="bookmark" href="https://van-de-weerd.net/cs/genetic-algorithms.html">Permalink</a>, <a rel="shortlink" href="https://v-d-w.net/ga">Shortlink</a></p>
      </header>
      <h2>
        <a href="#lorem">Lorem</a>
      </h2>
      <p>Iure vel modi voluptas dolorem vitae soluta in. Quos illum atque quidem et quaerat et distinctio quidem. Unde aut sit voluptas et. Expedita exercitationem deserunt sit eius quis molestias enim quasi.</p>
      <p>Non neque quas assumenda voluptatem placeat ut. Ratione debitis ratione illo ut fuga. Facere debitis iste nisi voluptas et. Suscipit consequatur eum eligendi.</p>
      <figure id="snippet-a">
        <pre><code></code><code>foo = [1, 2, 3]</code><code></code><code>bar = 2</code><code>for e in foo:</code><code>  print(e + 2)</code><code></code></pre>
        <figcaption>Hello, world!</figcaption>
      </figure>
      <h2>
        <a href="#ipsum">Ipsum</a>
      </h2>
      <p>Ut ut ipsa beatae voluptas nisi et quidem perferendis. Dolorem pariatur fuga eum labore est qui pariatur. Ad ex deserunt nam reprehenderit. Iusto quam facere aspernatur quos molestiae eligendi voluptatum facilis. Id voluptate exercitationem sunt repellat quam labore voluptatem.</p>
      <blockquote>
        <p>Veni, vidi, vici</p>
        <footer>
          <cite>J. Ceasar</cite>
        </footer>
      </blockquote>
      <p>Laboriosam omnis rerum nemo. Provident est molestiae eius sit eum. Consequatur maiores ad ut id ea.</p>
      <footer>
       ...

CSS

html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0 calc((100% - 600px) / 2);
  background-color: #333;
  color: white;
}

a {
  text-decoration: none;
}

a:link, a:visited {
  color: #090;
}

a:link:hover, a:visited:hover {
  text-decoration: underline;
  text-decoration-color: white;
}

a[rel=alternate][hreflang]:link, 
a[rel=alternative][hreflang]:visited {
  opacity: 0.7;
}

a[rel=alternate][hreflang]:link:hover, 
a[rel=alternative][hreflang]:visited:hover {
  text-decoration: none;
  opacity: 1;
}

a[rel=tag] {
  background-color: #333;
  border: 1px solid #222;
  display: inline-block;
  padding: 0 4px;
  text-transform: lowercase;
}

a[rel=tag]:link:hover, a[rel=tag]:visited:hover {
  text-decoration: none;
  background-color: #222;
  border-color: #111;
}

body > header > h1 {
  text-align: center;
  font-size: 1.2em;
}

body > header > nav {
  background-color: #222;
  border-bottom: 1px solid white;
  font-family: sans-serif;
  font-size: smaller;
}

body > header > nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body > header > nav > ul > li {
  display: inline-block;
}

body > header > nav a {
  padding: 8px 16px;
  display: block;
  color: #666;
}

body > header > nav a:link:hover, body > header > nav a:visited:hover {
  text-decoration: none;
  background-color: #111;
}

body > footer {
  padding: 16px;
  text-align: center;
  font-size: small;
  color: #666;
}

main > header {
  padding: 8px;
  padding-top: 0;
  border-bottom: 3px double white;
}

main > header > nav {
  font-size: small;
}

main > header > nav ul {
  list-style: none;
  padding: 0;
  display: inline;
}

main > header > nav ul > ul::before {
  content: "\00a0\1F892\00a0";
}

main > header li {
  display: inline;
}

article {
  background-color: #222;
  counter-reset: h2;
}

article > header, article > footer {
  border-color: white;
  font-size: smaller;
  background-color: #333;
  overflow: auto;
  position: relative;
}

article > header {
 ...