JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<a href="" class="button">Lorem ipsum</a>
<a href="" class="button button--secondary">Lorem ipsum</a>



<div class="siteHeader">
  <div class="siteHeader__utility">
      <a href="" class="button button--secondary siteHeader__buttonSignup">Lorem ipsum</a>
  </div>
</div>

SCSS

.button {
  background-color: purple;
  color: orange;
  font-family: georgia, serif;
  padding: 10px;
  
  &--secondary {  // 0 1 0
    background-color: green;
    box-shadow: inset 0 0 0 5px;
    color: navy;
  }
}

.siteHeader {
  margin-top: 40px;
  
  &__buttonSignup { // 0 1 0
    box-shadow: 0 -6px 0 0px; 
  }
}

body {
  padding: 40px;
}