JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <input class="input">
  <div class="outer">
    <div class="inner">
      <p class="name">
        Casey
      </p>
      <p class="favorite-color">
        Blue
      </p>
    </div>
    <button class="btn">Cool Stuff</button>
  </div>
</div>

SCSS

@mixin shadow ($shadow) {
        -webkit-box-shadow: $shadow;
      -moz-box-shadow: $shadow;
      box-shadow: $shadow;
}


$text-color: #FA2442;

.main {
  background-color: #CCC;
  height: 300px;
  .input {
      @include shadow(11px 10px 5px 0px rgba(0,0,0,0.75));
      margin: 12px 0 0 12px;
  }
  .name {
    color: $text-color;
    margin-bottom: 36px;
    padding: 12px;
  }

  .favorite-color {
    color: #FA2442;
    padding: 0 12px;
  }
  .btn {
    font-size: 14px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
            margin:24px 0 24px 24px;
    &:hover {
      color: #FA2442;
    }
  }
}