JSFiddle - React, Tailwind, and code Playground

by abenrob

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="banner container">
  <div class="title">
    <h1>
    Dynamic Analysis & Reporting Tool
    </h1>
    <h3>
    Building evidence for a joint response
    </h3>
  </div>
  <div class="col-xs-6 centered actions-left">
    <strong>Explore</strong>, <strong>visualize</strong> and
    <br> <strong>analyze</strong> data on displacement
    <div class="buttons">
      <div class="btn banner-btn">
        Go to graphs & tables
      </div>
      <div class="btn btn-primary banner-btn">
        Go to maps
      </div>
    </div>
  </div>
  <div class="col-xs-6 centered actions-right">
    <strong>Create</strong>, <strong>discuss</strong> and
    <br> <strong>download</strong> agreed-upon draft report
    <div class="buttons">
      <div class="btn banner-btn">
        Go to reports
      </div>
    </div>
  </div>
</div>

SCSS

$brand-primary: #5eccaa;
$dart-blue: #97C8EB;
$dart-blue-dark: #3D4E94;
$dart-text-dark: #737D90;
$border-gray: #737D90;
@import url(https://fonts.googleapis.com/css?family=Signika:400,300,600,700);
body {
  font-family: 'Signika', sans-serif;
  font-weight: 300;
  color: $dart-text-dark;
}

.banner {
  padding: 30px 0;
  width: 970px;
  .title {
    text-align: center;
    padding: 10px 0 30px;
    h2 {
      margin: 0;
    }
    h3 {
      margin: 10px 0 0 0;
    }
  }
  .centered {
    text-align: center;
    font-size: 24px;
    padding: 20px 0;
    background-color: #F4F4F4;
    &:last-of-type {
      border-left: 10px solid white;
      position: relative;
      &::before {
        content: '';
        transform: rotate(45deg);
        top: calc(50% - 20px);
        left: -22.7px;
        position: absolute;
        width: 40px;
        height: 40px;
        border-top: 10px solid white;
        border-right: 10px solid white;
        background-color: #F4F4F4;
      }
    }
    .buttons {
      .banner-btn {
        height: 46px;
        width: 180px;
        margin-top: 30px;
        border-radius: 23px;
        font-weight: 700;
        font-size: 16px;
        line-height: 32px;
        color: white;
        &:last-of-type {
          margin-left: 0px;
        }
      }
    }
    &.actions-left {
      color: $dart-blue-dark;
      .banner-btn {
        border: none;
        background-color: $dart-blue-dark;
        &:hover {
          background-color: darken($dart-blue-dark, 5%);
        }
        &:last-of-type {
          background-color: $dart-blue;
          &:hover {
            background-color: darken($dart-blue, 5%);
          }
        }
      }
    }
    &.actions-right {
      color: $brand-primary;
      .banner-btn {
        border: none;
        background-color: $brand-primary;
        &:hover {
          background-color: darken($brand-primary, 5%);
        }
      }
    }
  }
}