JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

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



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

SCSS

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

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

body {
  padding: 40px;
}