JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="div1">CSS Variables</div>

<div class="div2">CSS Variables</div>

<div class="div1">CSS Variables</div>

<div class="div2">CSS Variables</div>

<div class="div1">CSS Variables</div>

<div class="div2">CSS Variables</div>

<div class="div1">CSS Variables</div>

<div class="div2">CSS Variables</div>

CSS

:root {
  --main-color: coral;
  --sub-color: blue;
  --main-padding: 15px;
}



.div1 {
  background-color: var(--sub-color);
  padding: var(--main-padding);
}

.div2 {
  background-color: var(--main-color);
  padding: var(--main-padding);
}


@media screen and (max-width: 750px) {
 :root {
  --main-color: green;
  --sub-color: brown;
  --main-padding: 5px;
  }
}