JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="featurecolumns-sub">
  <div class="featurecolumn">
    <!--<h1>LIMP IN WALK OUT</h1>-->
    <div class="featuretilefull limp0" style="background-image:url(https://infinityhealthandbody.com/assets/Infinity/AdobeStock_32859606.jpeg);">
    
    </div>
    <h1 class="subpageheading">WHAT HURTS TODAY?</h1>
    <a href="https://infinityhealthandbody.com/limpin/jointpain/?gender=female">
    <div class="featuretilehalf limp1" onclick="window.location = 'https://infinityhealthandbody.com/limpin/jointpain/?gender=female';" style="background-image:url(https://infinityhealthandbody.com/assets/Infinity/AdobeStock_280322036.jpeg);">
      <h3>Female</h3>
    </div>
    </a>
    <a href="https://infinityhealthandbody.com/limpin/jointpain/?gender=male">
    <div class="featuretilehalf limp2" onclick="window.location = 'https://infinityhealthandbody.com/limpin/jointpain/?gender=male';" style="background-image:url(https://infinityhealthandbody.com/assets/Infinity/AdobeStock_91474360.jpeg);">
      <h3>Male</h3>
    </div>
    </a>
    <h2 class="lowerpadding">I HAVE JOINT PAIN</h2>
    <a href="https://infinityhealthandbody.com/limpin/backpain/?gender=female">
    <div class="featuretilehalf limp3" onclick="window.location = 'https://infinityhealthandbody.com/limpin/backpain/?gender=female';" style="background-image:url(https://infinityhealthandbody.com/assets/Infinity/AdobeStock_161866482.jpeg);">
      <h3>Female</h3>
    </div>
    </a>
    <a href="https://infinityhealthandbody.com/limpin/backpain/?gender=male">
    <div class="featuretilehalf limp4" onclick="window.location = 'https://infinityhealthandbody.com/limpin/backpain/?gender=male';" style="background-image:url(https://infinityhealthandbody.com/assets/Infinity/AdobeStock_119379430.jpeg);">
      <h3>Male</h3>
    </div>
    </a>
    <h2 class="lowerpadding">I HAVE BACK PAIN</h2>
    <a...

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

html,body{
  margin:0px;
  height:100%;
}


.featurecolumns-sub{
  font-family: 'Roboto', sans-serif;
  display:block;
  width:100%;
  max-width:1024px;
  margin:auto;
}
.featurecolumns-sub a{
  text-decoration:none;
  color:#fff;
}
.featurecolumns-sub>.featurecolumn{
  width:calc(100% - 24px);
  margin:10px;
  display:inline-block;
  vertical-align:top;
}
.featurecolumns-sub>.featurecolumn>h1{
  text-align:center;
  color:#3e7ee6;
  font-size:44px;
  margin:0px;
}
.featurecolumns-sub>.featurecolumn>h1.subpageheading{
  padding:20px;
}
.featurecolumns-sub>.featurecolumn>h2{
  text-align: center;
    color: #000;
    font-size: 28px;
    margin: 0px;
    padding: 10px;
}
.featurecolumns-sub>.featurecolumn>h2.lowerpadding{
  text-align: center;
    color: #000;
    font-size: 32px;
    margin: 0px;
    padding: 10px;
    padding-bottom:40px;
}
.featurecolumns-sub>.featurecolumn .featuretilehalf{
  width:calc(50% - 4px);
  height:320px;
  background-color:#eee;
  display:inline-block;
  background-size:auto 120%;
  background-position:50% 50%;
  position:relative;
  transition:all 1s;
  position: relative;
  cursor:pointer;
}
.featurecolumns-sub>.featurecolumn .featuretilehalf:hover{
  background-position:30% 50%;
}
.featurecolumns-sub>.featurecolumn .featuretilehalf>h3{
  text-align:center;
  position:absolute;
  bottom:0px;
  margin:0px;
  padding:6px;
  left:0px;
  right:0px;
  background-color: #3e7ee6;
  color:#fff;
}
.featurecolumns-sub>.featurecolumn .featuretilefull{
  width:100%;
  height:320px;
  background-size:120% auto;
  background-position:50% 50%;
  position:relative;
  transition:all 1.6s;
  position: relative;
  cursor:pointer;
}
.featurecolumns-sub>.featurecolumn .featuretilefull:hover{
  background-position:50% 30%;
}

@media only screen and (max-width: 768px) {
  .featurecolumns-sub>.featurecolumn {
    width:calc(100% - 20px);
    margin:10px;
   ...