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">
<h1><span>WOULD YOU LIKE TO:</span><button onclick="document.querySelector('.featuresub1').classList.remove('showfeature');document.querySelector('.featurecol1').classList.remove('expandcol');document.querySelector('.featuresub2').classList.remove('showfeature');document.querySelector('.featurecol2').classList.remove('expandcol');document.querySelector('.featurecol1').classList.remove('shrinkcol');document.querySelector('.featurecol2').classList.remove('shrinkcol');document.querySelector('.featurecolumns>h1>span').classList.remove('hideheading');document.querySelector('.featurecolumns>h1 button').classList.remove('showbutton');"><span>&larr;</span> Back</button></h1>
  <div class="featurecolumn featurecol1">
    <a href="javascript:void(0);" onclick="document.querySelector('.featuresub1').classList.add('showfeature');document.querySelector('.featurecol1').classList.add('expandcol');document.querySelector('.featurecol2').classList.add('shrinkcol');document.querySelector('.featurecolumns>h1>span').classList.add('hideheading');document.querySelector('.featurecolumns>h1 button').classList.add('showbutton');">
    <div class="featuretilefull healthtile1">
      <h2>FEEL BETTER</h2>
    </div>
    </a>
    <div class="featuresub1">
      <a href="https://infinityhealthandbody.com/health/joint">
      <div class="featuretilefull healthtile3">
        <h3>JOINT PAIN</h3>
      </div>
      </a>
       <a href="https://infinityhealthandbody.com/health/male">
       <div class="featuretilefull healthtile4">
        <h3>
        MALE PROCEDUES &amp; SEXUAL HEALTH
        </h3>
      </div>
      </a>
      <a href="https://infinityhealthandbody.com/health/hormones">
      <div class="featuretilefull healthtile5">
        <h3>HORMONES</h3>
      </div>
      </a>

      <a href="https://infinityhealthandbody.com/health/female">
      <div...

CSS

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

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

.featuresub1{
  display:none;
}
.featuresub2{
  display:none;
}
.showfeature{
  display:block !important;
}




.featurecolumns{
  font-family: 'Roboto', sans-serif;
  display:block;
  width:100%;
  max-width:1024px;
  margin:auto;
}

.featurecolumns>.featurecolumn{
  width:calc(50% - 24px);
  margin:10px;
  display:inline-block;
  vertical-align:top;
  transition:all 1s;
}
.featurecolumns>.featurecolumn.expandcol{
  width:calc(100% - 24px);
  margin:10px;
  display:inline-block;
  vertical-align:top;
}
.featurecolumns>.featurecolumn.shrinkcol{
  width:calc(0%);
  margin:0px;
  display:inline-block;
  vertical-align:top;
  opacity:0;
}
.featurecolumns>.featurecolumn.shrinkcol .featuretilefull{
  padding:0px;
  overflow:hidden;
}
.featurecolumns>h1{
  text-align:center;
  color:#3e7ee6;
  font-size:44px;
  margin:0px;
  margin-top:30px;
}
.featurecolumns>h1 button{
  border:none;
  font-size:24px;
  background:none;
  cursor:pointer;
  display:none;
}
.featurecolumns>h1 button>span{
  background-color:#3e7ee6;
  color:#fff;
  font-weight:bold;
  font-size:28px;
  line-height:48px;
  width:48px;
  display:inline-block;
  border-radius:50%;
}
.featurecolumns>h1>span.hideheading{
  display:none;
}
.featurecolumns>h1 button.showbutton{
  display:inline-block;
}
.featurecolumns>.featurecolumn>h2{
  text-align: center;
    color: #000;
    font-size: 28px;
    margin: 0px;
    padding: 10px;
}
.featurecolumns>.featurecolumn .featuretilehalf{
  width:calc(50% - 4px);
  height:240px;
  background-color:#eee;
  display:inline-block;
  background-size:auto 120%;
  background-position:50% 50%;
  position:relative;
  transition:all 0.7s;
}
.featurecolumns>.featurecolumn .featuretilehalf:hover{
  background-position:30% 50%;
}
.featurecolumns>.featurecolumn .featuretilefull>h2{
  text-align:center;
  position:absolute;
  bottom:0px;
  margin:0px;
 ...

JavaScript

var healthtile1_images = Array(
	'AdobeStock_241422060.jpeg',
  'AdobeStock_296831333.jpeg',
  'AdobeStock_162365386.jpeg',
  'AdobeStock_212216438.jpeg',
  'AdobeStock_249132321.jpeg'
);

var healthtile3_images = Array(
	'AdobeStock_161866482.jpeg',
  'AdobeStock_119379430.jpeg'
);
var healthtile4_images = Array(
	'AdobeStock_67191214.jpeg',
	'AdobeStock_163023702.jpeg'
	//'AdobeStock_6854642.jpeg' // did not receive this image
);
var healthtile5_images = Array(
	'AdobeStock_123203443.jpeg',
	'AdobeStock_207601406.jpeg',
	'AdobeStock_164142656.jpeg'
  
);
var healthtile6_images = Array(
	'AdobeStock_235839210.jpeg',
	'AdobeStock_221047994.jpeg'
	//'AdobeStock_85378528.jpeg' // did not receive this image
);
var healthtile7_images = Array(
	'AdobeStock_258301990.jpeg',
	'AdobeStock_370756477.jpeg',
	'AdobeStock_256167502.jpeg'
);

var bodytile1_images = Array(
	'AdobeStock_66063608.jpeg',
  'AdobeStock_66062805.jpeg',
  'AdobeStock_149706178.jpeg',
  'AdobeStock_47163496.jpeg',
  'AdobeStock_282351444.jpeg'
);

var bodytile3_images = Array(
	'AdobeStock_222554467.jpeg',
	'AdobeStock_205356254.jpeg',
	'AdobeStock_134401340.jpeg',
	'AdobeStock_313314707.jpeg'
);
var bodytile4_images = Array(
	'AdobeStock_233361444.jpeg'
);
var bodytile5_images = Array(
	
  'BodySculpting_226173775.jpeg',
  'AdobeStock_66062805.jpeg'
);
var bodytile6_images = Array(
	'AdobeStock_275948231.jpeg',
  'AdobeStock_413891385.jpeg'
);
function setImages(container,items){
	
  var item = items[Math.floor(Math.random()*items.length)];
  
  container.css('background-image','url(https://infinityhealthandbody.com/assets/Infinity/' + item + ')');
 ...