JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<ul class="flippanels">
  <li class="type1">
      <h2>MEN’S PROCEDURES</h2>
      <ul>
        <li><a href="https://www.infinityhealthandbody.com/rich">Men’s Health Counseling</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Erectile Disfunction</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Premature Ejaculation</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Chronic Prostatitis</a></li>
      </ul>
  </li><li class="type2">
    <h2>BODY SCULPTING</h2>
      <ul>
        <li><a href="https://www.infinityhealthandbody.com/rich">Abdomen</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Buttocks</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Arms, Legs</a></li>
        <li><a href="https://www.infinityhealthandbody.com/rich">Pelvic Floor</a></li>
      </ul>
  </li>
</ul>

CSS

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

ul.flippanels{
  list-style:none;
  padding:0px;
  margin:0px;
  font-family:helvetica;
}
ul.flippanels>li{
  display:inline-block;
  width:50%;
  height:360px;
  background-size:100% auto;
  background-position: 50% 0%;
  position:relative;
  transition:all 1.8s;
}
ul.flippanels>li:hover{
  background-position: 50% 30%;
  background-size:130%;
}
ul.flippanels>li>h2{
  position:absolute;
  top: calc(100% - 50px);
  margin:0px;
  left:0px;
  right:0px;
  text-align:center;
  font-size:37px;
  font-weight:bold;
  z-index:99;
  transition:all 1.4s;
  pointer-events:none;
}
ul.flippanels>li:hover>h2{
  top: calc(30px);
}
ul.flippanels>li>ul{
  list-style:none;
  padding:0px;
  padding-top:20%;
  padding-left:30%;
  margin:0px;
  font-size:21px;
  position:absolute;
  left:0px;
  bottom:0px;
  right:0px;
  top:0px;
  background-color:rgba(0,0,0,0);
  transition:all 1.2s;
  line-height:34px;
  opacity:0;
}
ul.flippanels>li.type2>ul{
  background-color:rgba(255,255,255,0);
}
ul.flippanels>li.type1:hover>ul{
  background-color:rgba(0,0,0,0.6);
  opacity:1;
}
ul.flippanels>li.type2:hover>ul{
  background-color:rgba(255,255,255,0.6);
  opacity:1;
}
ul.flippanels>li.type1>ul>li>a{
  color:#fff;
  text-decoration:none;
  position:relative;
}
ul.flippanels>li.type2>ul>li>a{
  color:#000;
  text-decoration:none;
  position:relative;
}
ul.flippanels>li.type1>ul>li>a:before{
  content:"";
  position:absolute;
  width:0%;
  height:1px;
  background-color:#fff;
  bottom:0px;
  transition:all 0.5s;
}
ul.flippanels>li.type2>ul>li>a:before{
  content:"";
  position:absolute;
  width:0%;
  height:1px;
  background-color:#000;
  bottom:0px;
  transition:all 0.5s;
}
ul.flippanels>li>ul>li>a:hover:before{
  width:100%;
}
ul.flippanels>li.type1{
  background-image:url(https://www.infinityhealthandbody.com/assets/MensProcedures_272440008.jpeg);
}
ul.flippanels>li.type2{
 ...