JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<h2 class="title">Text – Title / Our Product</h2>
<div class="gallery">

<!-- =========================================== -->
<!-- begin responsive CSS rollover photo gallery -->
<!-- =========================================== -->
<!-- copyright 2016 shipscript -->



<!--[if lt ie 8]>
<style>
/* lower browser versions can not display this gallery */
.pic_gallery img,
.pic_gallery .pic_gal,
.pic_gallery .pic_sm div,
.pic_gallery .pic_gal_cells { position:relative; border:0; padding:0; margin:0; }
.pic_gallery .pic_sm img { width:99%; height:auto; }
</style>
<![endif]-->

<!-- photo gallery -->
<div class="pic_gallery">
<div class="pic_gal pic_gal_6x2"><!-- thumbnail rows-columns -->
<div class="pic_gal_cells"><!-- positioning large photos -->

<!-- default large photo -->
<div class="pic_lg pic_main"></div>

<!-- thumbnails (12 max) -->


<span class="pic_set">
<input id="pic1" name="pic_select" type="radio" checked>
<label for="pic1" class="pic_sm"><div>
<img src="https://i.ebayimg.com/images/g/yhcAAOSwL8pcxuYx/s-l1600.jpg" >
</div></label><div class="pic_lg">
<input id="xl_pic1" type="checkbox">
<label for="xl_pic1">
<img src="https://i.ebayimg.com/images/g/yhcAAOSwL8pcxuYx/s-l1600.jpg" >
</label></div></span>

{% if $ImageURL[2]!="" %}
<span class="pic_set">
<input id="pic2" name="pic_select" type="radio">
<label for="pic2" class="pic_sm"><div>
<img src="https://i.ebayimg.com/images/g/No8AAOSwAvFcxuYy/s-l1600.jpg" >
</div></label><div class="pic_lg">
<input id="xl_pic2" type="checkbox">
<label for="xl_pic2">
<img src="https://i.ebayimg.com/images/g/No8AAOSwAvFcxuYy/s-l1600.jpg" >
</label></div></span>
{% endif %}

{% if $ImageURL[3]!="" %}
<span class="pic_set">
<input id="pic3" name="pic_select" type="radio">
<label for="pic3" class="pic_sm"><div>
<img src="https://i.ebayimg.com/images/g/AqQAAOSwYnlcxuYx/s-l1600.jpg" >
</div></label><div class="pic_lg">
<input id="xl_pic3" type="checkbox">
<label for="xl_pic3">
<img...

CSS

.gallery {
  float: left;
  width: 30%;
  margin: 10px;
}

.parts_img {
  margin: auto;
  display: block;
}

.benfits_wrap img {
  width: 100%;
}

.benfits_wrap {
  display: flex;
}

.benfit {
  padding: 20px;
}

.parts_img {
  max-width: 100%;
}



/********************************************************/



/* colors and borders */
.pic_gallery { border:1px solid #888888; ; } /* gallery border color */
.pic_gallery .pic_sm div { } /* thumbnail cell border */
.pic_gallery .pic_lg label { } /* main photo cell border */
.pic_gallery .pic_sm img { } /* thumbnail border */
.pic_gallery .pic_lg img { } /* main photo border */
.pic_gallery .pic_set:hover .pic_sm div { color: red; } /* thumbnail border hover color */
.pic_gallery { background-color:#FFFFFF; } /* gallery background color */
.pic_gallery .pic_sm div, 
.pic_gallery .pic_lg label { background-color:#FFFFFF; } /* cell background color */
.pic_gallery .pic_head,
.pic_gallery .pic_foot { color:transparent;} /* gallery text color */

/* text */
.pic_gallery { font-family:arial; font-size:16px; }
.pic_gallery .pic_head { display:none; text-align:center; font-size:.88em; font-weight:bold; padding-top:.5em; }
.pic_gallery .pic_foot { display:none; text-align:center; font-size:.7em;  }

/* shadows and corners */
.pic_gallery .pic_sm {  }
.pic_gallery .pic_lg {  }
.pic_gallery .pic_sm div {  } /* cell corners and shadows */
.pic_gallery .pic_lg label {  } /* cell corners and shadows */
.pic_gallery .pic_sm img {  } /* image corners and shadows */
.pic_gallery .pic_lg img {  } /* image corners and shadows */

/* sizing, matting, and margins (all values interact and vary by aspect ratio and image count) */
.pic_gallery { width:100%; max-width:609px; } /* change this % in media queries */
.pic_gallery .pic_gal_6x2 { width:100%; padding-top:133.33%; }
.pic_gallery .pic_gal_6x2 .pic_gal_cells { width:100%; height:100%; } /* sets padding around entire gallery */
.pic_gallery .pic_gal_6x2 .pic_sm { width:15.15%;...