JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<button class="toggle">
  toggle <span>dark</span>
</button>

<main>

  <p>This page is a demonstration of the elements that can be formatted using Simple.css. Each section includes a code block on how to include it in your site’s design.</p>

  <p>This may be a little basic for some people, but I wanted the barrier for entry to be as low as possible for this project.</p>

  <h2 id="basic-typography">Basic Typography</h2>

  <p>All the typography of Simple.css uses <code class="language-plaintext highlighter-rouge">rem</code> for sizing. This means that accessibility is maintained for those who change their browser font size. The <code class="language-plaintext highlighter-rouge">body</code> element has a size of <code class="language-plaintext highlighter-rouge">1.15rem</code> which makes all the standard font sizes slightly larger. This equates to <code class="language-plaintext highlighter-rouge">18.4px</code> for paragraph text, instead of the standard <code class="language-plaintext highlighter-rouge">16px</code>.</p>

  <p>The heading elements also have an increased top margin in order to break blocks of text up better.</p>

  <h1 id="heading-1-3rem">Heading 1 <code class="language-plaintext highlighter-rouge">3rem</code></h1>

  <h2 id="heading-2-26rem">Heading 2 <code class="language-plaintext highlighter-rouge">2.6rem</code></h2>

  <h3 id="heading-3-2rem">Heading 3 <code class="language-plaintext highlighter-rouge">2rem</code></h3>

  <h4 id="heading-4-144rem">Heading 4 <code class="language-plaintext highlighter-rouge">1.44rem</code></h4>

  <h5 id="heading-5-115rem">Heading 5 <code class="language-plaintext highlighter-rouge">1.15rem</code></h5>

  <h6 id="heading-6-096rem">Heading 6 <code class="language-plaintext highlighter-rouge">0.96rem</code></h6>

  <div class="language-plaintext highlighter-rouge">
    <div class="highlight">
      <pre class="highlight"><code>&lt;h2&gt;This is a H2 header&lt;h2&gt;

&lt;p&gt;This is some paragraph...

CSS

/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #d8dae1;
  --accent: #0d47a1;
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}



/* Dark theme */
.dark-theme {
  --bg: #212121;
  --accent-bg: #2b2b2b;
  --text: #dcdcdc;
  --text-light: #ababab;
  --border: #666;
  --accent: #ffb300;
  --code: #f06292;
  --preformatted: #ccc;
  --disabled: #111;
}

/* Add a bit of transparancy so light media isn't so glaring in dark mode */
.dark-theme {

  img,
  video {
    opacity: 0.8;
  }
}


html {
  /* Set the font globally */
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

/* Make the body a nice central block */
body {
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns:
    1fr min(45rem, 90%) 1fr;
  margin: 0;
}

body>* {
  grid-column: 2;
}

/* Make the header bg full width, but the content inline with body */
body>header {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 0 0.5rem 2rem 0.5rem;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

body>header h1 {
  max-width: 1200px;
  margin: 1rem auto;
}

body>header p {
  max-width: 40rem;
  margin: 1rem auto;
}

/* Add a little padding to ensure spacing is correct between content and nav */
main {
  padding-top: 1.5rem;
}

body>footer {
  margin-top: 4rem;
  padding: 2rem 1rem 1.5rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* Format headers */
h1 {
  font-size:...

JavaScript

const toggle = document.querySelector('.toggle')

toggle.addEventListener('click', e => {
  document.body.classList.toggle('dark-theme')
})