JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="solutionsGrid">
    <div class="heading solutionsGrid__heading">
      Hello
    </div>
    <div class="card">
        <div class="card__body">
            <a href="" class="btn -active">Buy Now</a>
            <a href="" class="btn">Buy Later :(</a>
        </div>
    </div>
</div>

SCSS

.heading {
  font-size: 24px;
  margin-bottom: 10px;
}

.btn {
  background-color: lightgray;
  padding: 4px;
  
  &.-active {
    background-color: hotpink;
  }
}

.card {
  background-color: white;
  box-shadow: inset 0 0 8px 8px rgba(0,0,0,0.25);
  padding: 30px 20px;
  display: inline-block;
}

.solutionsGrid {
  background-color: gold;
  padding: 15px;
}