JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<h1 class="d-flex flex-column flex-md-row screwfix-heavy text-black m-0">

  <div>
  
        <span class="lh-0-9 lh-md-0-85">
            <span class="t-vw-5 t-xlg-50 d-block">BANK</span>
            <span class="t-vw-5 t-xlg-50 d-block">HOLIDAY</span>
        </span>
        
  </div>

  <div>
  
      <span class="lh-0-85 t-vw-10 t-md-vw-4 t-xlg-50">DEALS</span>
   
  </div>

</h1>

CSS

/* fonts */
.screwfix-regular {font-family: 'screwfix_betaregular', arial, sans-serif}
.screwfix-bold {font-family: 'screwfix_betabold', arial, sans-serif}
.screwfix-heavy {font-family: 'screwfix_betaheavy', arial, sans-serif}

/* text */
.text-screwfix-red {color: #ed1c24}
.text-screwfix-blue {color: #0053a0}
.text-white {color: #fff}
.text-grey {color: #a8a9ad}
.text-black {color: #000}

.text-upper {text-transform: uppercase}
.text-centre {text-align: center}
.text-right {text-align: right}
.text-bold {font-weight: bold}

/* font sizes */
.t-50 {font-size: 50px}
.t-60 {font-size: 60px}
.t-70 {font-size: 70px}
.t-vw-4 {font-size: 4vw}
.t-vw-5 {font-size: 5vw}
.t-vw-10 {font-size: 10vw}
.t-vw-12 {font-size: 12vw}
.t-vw-14 {font-size: 14vw}

@media (min-width: 641px) {
    .t-md-4-vw {font-size: 4vw} 
}

@media (min-width: 1200px) {
    .t-xlg-50 {font-size: 50px} 
    .t-xlg-125 {font-size: 125px}  
    .t-xlg-135 {font-size: 135px}    
    .t-xlg-190 {font-size: 190px}
}

/* line heights */
.lh-0-85 {line-height: 0.85}
.lh-0-9 {line-height: 0.9}
.lh-1   {line-height: 1}
.lh-1-1 {line-height: 1.1}
.lh-1-2 {line-height: 1.2}
.lh-1-25 {line-height: 1.25}

@media (min-width: 641px) {
    .lh-md-0-85 {line-height: 0.85}
}

/* display */
.d-none {display: none}
.d-inline {display: inline}
.d-inline-block {display: inline-block}
.d-block {display: block}

@media (min-width: 641px) {
    .d-md-block {display: block}
}

/* widths */
.w-100p {width: 100%} 
.w-50p {width: 50%} 

.w-100 {width: 100px}

/* heights */
.h-100p {height: 100%} 

@media (min-width: 641px) {
    .h-md-500 {height: 500px}
}

@media (min-width: 1025px) {
    .h-lg-600 {height: 600px}
}

/* padding */
.px-24 {padding-left: 24px; padding-right: 24px}
.py-12 {padding-top: 12px; padding-bottom: 12px}

.p-24 {padding: 24px}

@media (min-width: 641px) {
    .p-md-24 {padding: 24px}
}

/* margins */
.m-0 {margin: 0}
.mt-10 {margin-top: 10px}
.ml-2 {margin-left: 2px}
.ml-10 {margin-left: 10px}

@media...