JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="torso">
  <a href="" class="button">button</a>
  <a href="" class="button -alt">alt button</a>
</div>

<div class="footer">
  <a href="" class="button -alt footer__cta -attachedRight">
    hello
  </a>
</div>

SCSS

.button {
  background-color: red;
  color: white;
  padding: 1rem;
  
  &.-alt {
    font-weight: bold;
    background-color: blue;
  }
}

.torso {
  padding: 2rem 0;
}

.footer {
  position: relative;
  padding: 2rem;
  background-color: skyblue;
  
  &__cta {
    text-transform: uppercase;
    
    &.-attachedRight {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      font-weight: normal;
    }
  }
}