JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="banner-body-text-container">
  <p class="text-red screwfix-heavy line-height-0-9 text-uppercase"><span class="banner-body-text-medium">Save <span class="display-inline-block text-45-percent">Up<br>To</span></span><span class="banner-body-text-large display-inline-block"><sup>£</sup>200<sup>.00</sup></span></p>
</div>
<div class="banner-footer-text-container background-black-035">
  <div class="display-flex flex-justify-space-between flex-align-center height-100p">
    <div class="flex-basis-50p flex-basis-small-up-60p">
      <p class="banner-footer-text-medium screwfix-regular text-white line-height-1-1 line-height-small-up-1-2 text-uppercase">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
    </div>
    <div>
      <p class="text-white text-align-right screwfix-heavy line-height-1"><span class="banner-footer-text-small text-uppercase display-inline-block">From Only </span><span class="banner-footer-text-large"><sup>€ </sup>9999<sup>.99</sup></span><span class="banner-footer-text-xsmall text-white screwfix-regular text-capitalize display-block">Was €9999.99</span></p>
    </div>
  </div>
</div>


<!-- full width -->
<div class="banner-body-text-container">
  <p class="text-red screwfix-heavy line-height-0-9 text-uppercase"><span class="banner-body-text-medium">Save <span class="display-inline-block text-45-percent">Up<br>To</span></span><span class="banner-body-text-large display-inline-block"><sup>£</sup>200<sup>.00</sup></span></p>
</div>
<div class="banner-footer-text-container background-black-035">
  <div class="display-flex flex-justify-space-between flex-align-center height-100p">
    <div class="flex-basis-50p flex-basis-small-up-60p">
      <p class="banner-footer-text-medium screwfix-regular text-white line-height-1-1 line-height-small-up-1-2 text-uppercase">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
    </div>
    <div>
      <p class="text-white text-align-right...

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}