JSFiddle - React, Tailwind, and code Playground

by peteryates

HTML

<button class="my-fancy-button">
  Press me!
</button>

SCSS

$light-red: #eb351c;
$white: #fff;

.my-fancy-button {
  color: $white;
  background: $light-red;
  border: 4px solid darken($light-red, 20%);
  padding: 1em 2em;
  font-weight: bold;
  
  /* in SCSS you can prefix nested rules with & so you don't
   need to keep repeating the parent's selector */
  &:hover {
    background: darken($light-red, 10%);
  }
  
  &:active {
    background: $white;
    color: darken($light-red, 10%);
  }
}