JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* SCSS HEX */
    :root {
      --hex-amaranth-pink: #f49cbbff;
      --hex-light-cyan: #cbeef3ff;
      --hex-ou-crimson: #880d1eff;
      --hex-rusty-red: #dd2d4aff;
      --hex-bright-pink-crayola: #f26a8dff;
    }

    /* SCSS HSL */
    :root {
      --hsl-amaranth-pink: hsla(339, 80%, 78%, 1);
      --hsl-light-cyan: hsla(187, 62%, 87%, 1);
      --hsl-ou-crimson: hsla(352, 83%, 29%, 1);
      --hsl-rusty-red: hsla(350, 72%, 52%, 1);
      --hsl-bright-pink-crayola: hsla(345, 84%, 68%, 1);
    }

    /* SCSS RGB */
    :root {
      --rgb-amaranth-pink: rgba(244, 156, 187, 1);
      --rgb-light-cyan: rgba(203, 238, 243, 1);
      --rgb-ou-crimson: rgba(136, 13, 30, 1);
      --rgb-rusty-red: rgba(221, 45, 74, 1);
      --rgb-bright-pink-crayola: rgba(242, 106, 141, 1);
    }

    /* SCSS Gradient */
    :root {
      --gradient-top: linear-gradient(0deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-right: linear-gradient(90deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-bottom: linear-gradient(180deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-left: linear-gradient(270deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-top-right: linear-gradient(45deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson), var(--hex-rusty-red), var(--hex-bright-pink-crayola));
      --gradient-bottom-right: linear-gradient(135deg, var(--hex-amaranth-pink), var(--hex-light-cyan), var(--hex-ou-crimson),...