JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<h1>Lorem ipsum dolor sit</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non et neque voluptas impedit ad, labore, quod cupiditate corporis eaque ut aspernatur, molestiae, sunt suscipit iusto.</p>

<button>Lorem ipsum now</button>

<hr>

<section class="make-it-pink-again">
  <h1>this will always be purple</h1>
  <button>Lorem ipsum.</button>
</section>

CSS

:root {
  --bg: darkviolet;
  --text: pink;
  --primary: red;
}


@media screen and (min-width: 600px) {
  :root {
    --bg: blue;
    --text: navy;
    --primary: orange;
  }

  .make-it-pink-again {
    --bg: darkviolet;
    --text: pink;
    --primary: red;
    
    color: var(--text);
    background-color: var(--bg);
  }
}


html {
  background-color: var(--bg);
  color: var(--text);
}

body {
  background-color: transparent;
}

button {
  background-color: var(--primary);
  border: 1px solid var(--text);
  border-radius: 4px;
  color: var(--text);
  padding: .5em 1em;
}