JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="executive-container">
  <div class="executive-row">

    <div class="executive-card">
      <div class="executive-card-content">
        <div class="executive-card-header">
          <h2>Total Opportunities ($)</h2>
        </div>
        <div class="executive-card-main-value">
          <h2>100K</h2>
        </div>
        <div class="executive-card-stats">
          <div class="executive-card-stats-container"></div>
        </div>
      </div>
    </div>

  </div>
</div>

SCSS

$executive-space: .9375rem;
$l-space: 1rem;
$lightgrey: #d8d8d8;
$bg: #f2f2f2;
$white: #fff;
$font-color: #484848;

body {
  font-family: sans-serif;
  color: $font-color;
}

.executive-container {
  max-width: 68.75rem;
  padding-left: $executive-space;
  padding-right: $executive-space;
}

.executive-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$executive-space;
  margin-right: -$executive-space;
}

.executive-card {
  flex: 1;
  min-height: 1px;
  padding-left: $executive-space;
  padding-right: $executive-space;
  position: relative;
}

.executive-card-content {
  border: 1px solid $lightgrey;
  background: $white;
}

.executive-card-header {
  background: $bg;
  border-bottom: 1px solid $lightgrey;
  padding: .5rem;
  text-transform: uppercase;
  letter-spacing: .03rem;
  font-size: .75rem;
  font-weight: 600;
}

.executive-card-main-value {
  text-transform: uppercase;
  letter-spacing: .03rem;
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
  padding: calc(#{$l-space} * 3) $l-space;
}

.executive-card-stats {
  border-top: 1px solid $lightgrey;
}

.executive-card-stats-container {
  flex: 1;
  
  &:not(:last-of-type) {
    border-right: 1px solid $lightgrey;
  }
}