JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<h1 class="heading">i am a heading</h1>

<button class="button">i am a button</button>


<h1 class="heading -red">i am a heading</h1>

<button class="button -green">i am a button</button>


<div class="underlined">underlined</div>

<div class="underlined -red">red and underlined</div>

CSS

.heading {
  color: var(--fg, blue);
}

.button {
  background-color: var(--fg, blue);
  border: 0;
  padding: .5rem 1rem;
  color: var(--bg, white);
}

.underlined {
  display: inline-block;
  box-shadow: 0 -3px var(--fg, orange) inset;
}


.-red {
  --fg: red;
}

.-green {
  --fg: green;
}