JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div style="background:#232323;padding: 20px">
    <div style="width:80%;">

        <div class="prodSelect">
            <label>
                <div class="prodCont">
                    <span class="mostPopular">★★★ Most Popular ★★★</span>
                    <div class="prodRow">
                        <div class="prodLeftCol">
                            <img src="https://images.clickfunnels.com/ab/2333806e7511e8bf54a9508cdfbace/Strength-Stack-fusion.png" alt="" />
                        </div>
                        <div class="prodMidCol">
                            <ul>
                                <li>3 Bottles of Strength 1</li>
                                <li>2 Containers of Fusion</li>
                                <li>1 Bottle of P-Cycle</li>
                                <li>Muscle 1 Gym Bag</li>
                                <li>Muscle 1 Shaker Bottle</li>
                            </ul>
                            <div class="totalValue">
                                <span>Total Value:</span>
                            </div>
                            <div class="priceLimited">
                                <span>Discounts:</span>
                            </div>
                        </div>
                        <div class="prodRightCol">
                            <ul>
                                <li>$329.97</li>
                                <li>$69.98</li>
                                <li>$99.99</li>
                                <li>$49.99</li>
                                <li>$9.99</li>
                            </ul>
                            <div class="valueTotal">
                                <span>$559.92</span>
                            </div>
                            <div class="limitedPrice">
                                <span>$393.02</span>
                            </div>
                        </div>
                    </div>
                    <div...

CSS

/* --- Prod Select --- */

.prodSelect {
  width: 100%;
  padding: 0;
  margin: 0;
}

.prodSelect label {
  font-weight: inherit !important;
  border-radius: 5px;
  margin: 0 auto 25px;
}

.prodSelect label:last-of-type {
  margin: 0 auto;
}

.prodCont {
  width: 100%;
  border-radius: 5px !important;
  background: #fefefe;
  overflow: hidden;
  padding: 30px;
}

.prodSelect label:hover {
  box-shadow: 0 0 10px -1px #232323, 0 0 0 10px #0075b2, 0 0 20px 10px #fefefe;
  -webkit-transition: 0.1s ease-in-out;
  -moz-transition: 0.1s ease-in-out;
  -o-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.prodCont .mostPopular {
  display: inline-block;
  background: #0075b2; /* #017b01 */
  width: 100%;
  margin: 0 0 5px;
  padding: 7px 0 7px;
  color: #fefefe;
  color: rgba(255, 255, 255, 1);
  -webkit-animation: opacityPulse 7s ease-out;
  animation: opacityPulse 7s ease-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-radius: 5px 5px 0 0 !important;
}

@-webkit-keyframes opacityPulse {
  0% {
    color: rgba(255, 255, 255, 1.0);
  }
  45% {
    color: rgba(255, 255, 255, 1.0);
  }
  50% {
    color: rgba(255, 255, 255, 0.3);
  }
  55% {
    color: rgba(255, 255, 255, 1.0);
  }
  60% {
    color: rgba(255, 255, 255, 0.3);
  }
  65% {
    color: rgba(255, 255, 255, 1.0);
  }
  100% {
    color: rgba(255, 255, 255, 1.0);
  }
}

.prodCont .prodRow:first-of-type {
  padding: 10px;
}

.prodRow {
  width: 100%;
  clear: both;
  display: table;
  table-layout: fixed;
}

.prodLeftCol,
.prodMidCol,
.prodRightCol {
  overflow: hidden;
  display: table-cell;
  vertical-align: middle;
}

.prodLeftCol {
  width: 30%;
}

.prodMidCol {
  width: 44%;
}

.prodRightCol {
  width: 20%;
}

.prodLeftCol img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.prodMidCol ul {
  list-style: none;
  text-align: left;
  font-size: 2rem;
  font-weight: bold;
  padding-left: 0;
}

.prodMidCol .totalValue {
  text-align:...