JSFiddle - React, Tailwind, and code Playground

by Leespiker

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

.input {
  margin-top: 12px;
  -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-left: 12px;
}

.main {
  background-color: #CCC;
  height: 300px;
}

.btn:hover {
  color: #FA2442;
}

.name {
  color: #FA2442;
  margin-bottom: 36px;
  padding: 0 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.favorite-color {
  padding-right: 12px;
  color: #FA2442;
  padding-left: 12px;
}

.btn {
  margin-left: 24px;
  font-size: 14px;
  margin-top: 24px;
  -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-bottom: 24px;
}