JSFiddle - React, Tailwind, and code Playground

by Alhalabi

CSS

:root {
  --color-1: rgb(234,35,54);
  --color-2: rgb(255,172,14);
  --color-3: rgb(252,238,221);
  --color-4: rgb(196,175,0);
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}:root {
  --color-1: rgb(149,206,103);
  --color-2: rgb(218,227,187);
  --color-3: rgb(250,248,240);
  --color-4: rgb(149,221,218);
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}:root {
  --color-1: rgb(149,206,103);
  --color-2: rgb(218,227,187);
  --color-3: rgb(250,248,240);
  --color-4: rgb(149,221,218);
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}:root {
  --color-1: rgb(254,114,80);
  --color-2: rgb(245,240,237);
  --color-3: rgb(121,224,231);
  --color-4: rgb(69,212,222);
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}