JSFiddle - React, Tailwind, and code Playground

got oil?

by CBroe

HTML

<div class="f1">GOT OIL?</div>
<div class="f1 b">HATE YOUR GOVERNMENT?</div>
<div class="f2">CALL US!</div>
<div class="f3">UNITED STATES OF AMERCIA</div>

CSS

html { display:flex; justify-content:center; align-items:center; height:100%; line-height:.8; text-align:center; }
.f1 { font-family: 'Dorsa'; font-size:24vw; }
.b { font-size:7.9vw; }
.f2 { font-family: 'Khula'; font-size:6vw; transform:rotate(-6deg); color:#f00; margin:.4em auto .3em; }
.f3 { font-family: 'Khula'; font-size:2.38vw; }


/*
font-family: 'Dorsa', sans-serif;
font-family: 'Khula', sans-serif;
*/
@font-face {
  font-family: 'Dorsa';
  font-style: normal;
  font-weight: 400;
  src: local('Dorsa'), local('Dorsa-Regular'), url(https://fonts.gstatic.com/s/dorsa/v9/yYLn0hjd0OGwqr4613E.woff2) format('woff2');
}
@font-face {
  font-family: 'Khula';
  font-style: normal;
  font-weight: 800;
  src: local('Khula ExtraBold'), local('Khula-ExtraBold'), url(https://fonts.gstatic.com/s/khula/v4/OpNPnoEOns3V7G-piBvSpi9NXw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Khula';
  font-style: normal;
  font-weight: 800;
  src: local('Khula ExtraBold'), local('Khula-ExtraBold'), url(https://fonts.gstatic.com/s/khula/v4/OpNPnoEOns3V7G-piBvdpi9NXw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Khula';
  font-style: normal;
  font-weight: 800;
  src: local('Khula ExtraBold'), local('Khula-ExtraBold'), url(https://fonts.gstatic.com/s/khula/v4/OpNPnoEOns3V7G-piBvTpi8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}