JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="frame">

  <header class="d-flex bg-white">

    <a href="#">
      <img class="border-grey border-width-right" src="https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/btn-home.jpg" alt="">
    </a>

    <div class="mx-30 d-flex flex-column justify-content-centre">
      <a href="#">
        <img class="w-315" src="https://www.screwfix.com/assets/gfx/branding/screwfix-logo.svg" alt="Screwfix logo">
      </a>

      <h4 class="t-vw-1 t-xlg-16 text-grey text-overflow m-0 w-300">GLOUCESTER - EASTERN AVENUE</h4>

    </div>

    <div role="search" class="search-container position-relative d-flex align-items-centre">

      <input class="m-0 h-60 border-blue border-width-2 t-28" name="search" type="text" placeholder="Type your search here" autocomplete="off" value="" tabindex="1">

      <div class="h-60 w-60 bg-blue d-flex justify-content-centre align-items-centre">
        <img src="https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/icon-search.png" alt="">
      </div>

    </div>

    <a href="#"><img src="https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/switch_to_inc_vat.png" alt=""></a>
    <a href="#"><img src="https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/btn-start-again.jpg" alt=""></a>
    <a class="position-relative" href="#"><img src="https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/btn-view-trolley.png" alt="">
    <span class="bg-blue border-radius text-white t-vw-1-2 t-xlg-18 position-absolute h-27p w-23p top-10p right-24p d-flex justify-content-centre align-items-centre">42</span>
    </a>

  </header>


  <h1>Browse Categories</h1>


  <main id="container-main" class="wrp">
    <div class="inner">

      <div class="row">

        <div class="lg-24 md-24 cols">
          <div class="lister__items">


            <div class="row">

              <div...

CSS

body {
  background: #ededed!important;
}

.position-relative {position: relative}
.position-absolute {position: absolute}

.top-0 {top: 0}
.top-10p {top: 10%}
.top-12 {top: 12px}
.right-0 {right: 0}
.right-24p {right: 24%}
.right-37 {right: 37px}

.d-flex {display: flex}
.flex-1 {flex: 1}
.flex-column {flex-direction: column}
.justify-content-centre {justify-content: center}
.align-items-centre {align-items: center}

.m-0 {margin:0!important}

.px-20 {padding-right: 20px!important; padding-left: 20px!important}
.px-30 {padding-right: 30px!important; padding-left: 30px!important}

.mx-30 {margin-right: 30px!important; margin-left: 30px!important}

.bg-white {background-color: #fff}
.bg-blue {background-color: #0355a1}

.border-grey {border: 1px solid #d1d1d1!important}
.border-blue {border: 1px solid #0355a1!important}

.border-radius {border-radius: 50%}

.border-width-2 {border-width: 2px!important}

.border-width-right {border-width: 0 1px 0 0!important}

.text-grey {color: #636363}
.text-white {color: #fff}

.t-18 {font-size: 18px!important}
.t-28 {font-size: 28px!important}
.t-vw-1 {font-size: 1vw}
.t-vw-1-2 {font-size: 1.2vw}

.w-23p {width: 23%}
.w-33 {width: 33px}
.w-60 {width: 60px}
.w-300 {width: 300px}
.w-315 {width: 315px}
.mw-100p {max-width: 100%}

.h-27p {height: 27%}
.h-33 {height: 33px}
.h-60 {height: 60px}

@media (min-width: 1200px){
    .t-xlg-16 {font-size: 16px}
    .t-xlg-18 {font-size: 18px}
}

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* element needs a width */
}

header {margin-bottom: 2.5rem}
header img {max-width: 100%}

.frame {border: 2rem solid #000}





.search-container {
  flex: 1 0 250px; 
  margin: 0 30px
}

.lister__items {
   padding: 1rem 0 4rem;
    max-width: 1542px!important;
    background: url(https://screwfix.aws.ie.ae.redboxcloud.com/media/wysiwyg/digital-store/Home-BG.jpg) right bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

@media...