JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div class="tooltip">
  <div class="left">
    <div class="heading">Paying</div>
    <div class="subheading">Oct 2015</div>
  </div>
  <div class="right">
    <div class="heading">523</div>
    <div class="subheading">Responses</div>
  </div>
</div>

SCSS

$blue: #4F9BEA;

body {
  font-family: Lucida Grande;
}

.tooltip {
  background: white;
  display: inline-block;
  position: relative;
  width: 220px;
  height: 67px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);

  &::after {
    background: white;
    width: 16px;
    height: 16px;
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: -1;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  }
  .left {
    float: left;
    .heading {
      color: $blue;
    }
  }
  .right {
    float: right;
    .heading {
      color: darken($blue, 30%)
    }
  }
  .left, .right {
    padding: 20px;
    display: inline-block;
  }
  .heading {
    font-size: 16px;
    font-weight: bold;
  }
  .subheading {
    font-size: 12px;
  }
}

JavaScript

.