JSFiddle - React, Tailwind, and code Playground

by Clavinia

HTML

<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Montserrat:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,500;1,700;1,900&display=swap" rel="stylesheet">


<div class="container">
  <header class="header">
    <h1>Story of the Siamese Cat</h1>
    <p class="subtitle">Behind this lovely and smart cat breed</p>
  </header>
  <div class="content">
    <h2>
      Introduction
    </h2>
    <p>The Siamese cat is one of the first distinctly recognized breeds of Asian cat. Derived from the Wichianmat landrace, one of several varieties of cat native to Thailand (formerly known as Siam), the original Siamese became one of the most popular breeds in Europe and North America in the 19th century. </p>

    <img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Siam_Lilac_Point.jpg" alt="Siamese Cat from Wikipedia" />
    <h2>
      Siamese unique traits
    </h2>
    <p>
      The carefully refined, more extreme-featured, modern-style Siamese is characterized by <span class="bold">blue almond-shaped eyes</span>; a triangular head shape; large ears; an elongated, slender, and muscular body; and various forms of point colouration. Other than colouration, the modern-style Siamese bears little resemblance to the original stock, and the more moderate, traditional, or "old-style" Siamese, with a much rounder head and body, has been re-established by multiple registries as the Thai cat. </p>
    <h3>
      Siamese magnetic cat-onality
    </h3>
    <p>The International Cat Association describes the modern Siamese as <span class="bold">affectionate, social, intelligent, and playful into adulthood</span>, often enjoying a game of fetch.Siamese tend to seek human interaction and also like companionship from other cats.
    </p>
  </div>
  <div class="footer">
    Text taken from <a href="https://en.wikipedia.org/wiki/Siamese_cat">Siamese Cat Wikipedia Entry</a>.
  </div>

</div>

CSS

/* Variables definition */

:root {
  /* Color palette */
  --color-lightest: white;
  --color-lighter: #EBF5EE;
  --color-accent: #78A1BB;
  --color-accent2: #BFA89E;
  --color-darker: #8B786D;
  --color-darkest: #283044;

  /* Font styles */
  --font-base: 'Montserrat', sans-serif;
  --font-display: 'Lobster', cursive;
  --font-bold-weight: 700;
  --font-bold-color: var(--color-darkest);
  --line-height: 1.5;
  --font-size: 14px;
  --font-size-increment: ;

  /* Color styles */
  --body-bg-color: var(--color-lighter, white);
  --text-color: var(--color-darker, #333);

  /* titles and subtitles */
  --titles-alignment: left;
  --titles-color: var(--color-accent);
  --h1-alignment: center;
  --h1-padding: 0 0 20px;
  --subtitle-style: italic;
  --subtitle-align: center;

  /* Image */
  --img-max-width: 200px;
  --img-max-height: 200px;
  --img-fit: cover;
  /* try "fill" or "contain" to see it change shape */
  --img-border-radius: 20%;

  /* Layout and design options */
  --container-max-width: 800px;
  --box-padding: 10px 20px;
  --general-text-align: justify;


}

/* Variables implementation */

body {
  background: var(--body-bg-color);
  color: var(--text-color);
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-align: var(--general-text-align, left);
}

a,
a:link,
a:visited {
  color: var(--color-accent, blue);
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}


h1,
h2,
h3 {
  color: var(--titles-color, inherit);
  font-family: var(--font-display, serif);
  text-align: var(--titles-alignment, left; );
}

h1 {
  color: var(--color-lightest);
  font-size: calc(var(--font-size) * 2.2);
  text-align: var(--h1-alignment, var(--titles-alignment, center));
  border-bottom: 1px solid var(--color-lighter);
  padding: var(--h1-padding);
}

h2 {
  font-size: calc(var(--font-size) * 1.8);
  border-bottom: 1px solid var(--color-accent);
}

h3 {
  font-size: calc(var(--font-size) *...