JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Test Page</title>
  </head>
  <body>
    <div id="top" class="page" role="document">
      <header role="banner">
        <h1>HTML5 Test Page</h1>
        <p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
      </header>
      <nav role="navigation">
        <ul>
          <li>
            <a href="#text">Text</a>
            <ul>
              <li><a href="#text__headings">Headings</a></li>
              <li><a href="#text__paragraphs">Paragraphs</a></li>
              <li><a href="#text__blockquotes">Blockquotes</a></li>
              <li><a href="#text__lists">Lists</a></li>
              <li><a href="#text__hr">Horizontal rules</a></li>
              <li><a href="#text__tables">Tabular data</a></li>
              <li><a href="#text__code">Code</a></li>
              <li><a href="#text__inline">Inline elements</a></li>
            </ul>
          </li>
          <li>
            <a href="#embedded">Embedded content</a>
            <ul>
              <li><a href="#embedded__images">Images</a></li>
              <li><a href="#embedded__audio">Audio</a></li>
              <li><a href="#embedded__video">Video</a></li>
              <li><a href="#embedded__canvas">Canvas</a></li>
              <li><a href="#embedded__meter">Meter</a></li>
              <li><a href="#embedded__progress">Progress</a></li>
              <li><a href="#embedded__svg">Inline SVG</a></li>
              <li><a href="#embedded__iframe">IFrames</a></li>
            </ul>
          </li>
          <li>
            <a href="#forms">Form elements</a>
            <ul>
              <li><a href="#forms__input">Input fields</a></li>
              <li><a href="#forms__select">Select menus</a></li>
              <li><a...

CSS

/* ==================== Типографика ==================== */
h6, h5, h4, h3, h2, h1, .h6, .h5, .h4, .h3, .h2, .h1 {
padding: 0;
margin: 0 0 .8rem 0;
font-weight: bold;
}

h1, .h1 {
font-size: 2.375rem;
line-height: 1.1;
}
h2, .h2 {
font-size: 2.125rem;
line-height: 1.2;
}
h3, .h3 {
font-size: 1.875rem;
line-height: 1.3;
}
h4, .h4 {
font-size: 1.625rem;
line-height: 1.4;
}
h5, .h5 {
font-size: 1.375rem;
line-height: 1.5;
}
h6, .h6 {
font-size: 1.125rem;
line-height: 1.6;
}

@media (max-width: 768px) {
h1, .h1 {
font-size: 2rem;
}
h2, .h2 {
font-size: 1.813rem;
}
h3, .h3 {
font-size: 1.625rem;
}
h4, .h4 {
font-size: 1.438rem;
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1.063rem;
}
}

p, .p {
padding: 0;
margin: 0 0 1rem 0;
font-size: 1rem;
}