JSFiddle - React, Tailwind, and code Playground

by mroncetwice

HTML

<div class="posrel wrap_all">
  <div class="col scrn-big_col10 box-align_center">
    <h1 class="titleline titleline_topleft">
    GET YOUR TEAM IN GEAR
    </h1>
  </div>
  <div class="col scrn-big_col8 box-align_center">
    <h2 class="titleline titleline_topleft">
    CORPORATE FITNESS SUCCESS STARTS HERE
    </h2>
  </div>
  <div class="col scrn-big_col8 txt_right">
    <button>
    LEARN MORE
    </button>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Abel);
* { font-family:'Abel', sans-serif; line-height:1;}
.posrel {position:relative;}
.box-align_center { margin-left:auto; margin-right:auto; }
.wrap_all { width:100%; max-width: 1008px; padding-top:90px;}
.scrn-big_col10 { width: 83%; }
.scrn-big_col8 { width: 66%; }
h1 { font-size:120px; margin-bottom:60px;}
h2 {font-size:45px; font-weight:normal;}
.titleline { position:relative; }
.titleline:before { content:""; position:absolute; height:180%; width:1px; transform:rotate(54deg); background:#26abb5; }
.titleline.titleline_topleft:before { top:0; margin-top:-5%; left:0; margin-left:10px;}
button { width:282px; background:#f36000; color:white; border:0; padding:8px; font-size:24px; }

.txt_right { text-align:right;}