JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form1" class="floor-chechbox row">
 
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="fr" name="floorprice" value="without_floor" type="radio" checked />
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка без пола</div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="zr" name="floorprice" value="floor_batten" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка с полом из половой доски</div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="sr" name="floorprice" value="floor_dsp" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">коробка с полом из фанеры </div>
    </label>
  </div>
   <div class="col-md-12">
    <label class="floor-radio">
      <input id="sr" name="floorprice" value="floor_dsp" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">фанера и ковролин </div>
    </label>
  </div>
  <div class="col-md-12">
    <label class="floor-radio">
      <input id="tr" name="floorprice" value="floor_dpk" type="radio"/>
      <div class="floor-checkbox"></div>
      <div class="checked-item-text">
        <span>коробка с полом из ДПК</span>
      </div>
    </label>
  </div>
 
</div>
 
 
<div class="check-color">
<div class="row">
  <div class="col-xs-6 block-roof-color">
    <div class="text-color-for-roof">
    <b>Цвет крыши:</b>
    </div>
    <div id="form2" class="color-for-roof">
 
      <label class="roof-color">
        <input id="t-color-5" name="roofcolor" value="roof_white" type="radio" checked />
        <div data-title="Белый"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-1" name="roofcolor" value="roof_grey" type="radio" />
 ...

CSS

.floor-chechbox{margin-bottom: 15px;}
label.floor-radio{margin-bottom: 0px;}
label.floor-radio input{display:inline-block;}
label.floor-radio input+div.floor-checkbox{
height: 20px;
text-align:left;
display:inline-block;
vertical-align: text-bottom;
padding-left:5px;
}
label.floor-radio input~div.checked-item-text > img{height: 20px;}
label.floor-radio input:checked~div.checked-item-text{color: #cbb892; font-weight:bold;}
label.floor-radio input:checked~div.checked-item-text:before{
  content: '✔ ';
  color:#b1945b;
}
label.floor-radio input:checked~div.floor-checkbox{background:#c4af84;}
label.floor-radio input+div.floor-checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #b1945b;
  box-sizing: border-box;
  border-radius:50%;
}
label.floor-radio input {display: none;}
.floor-checkbox, .checked-item-text, .checked-item-text span, .checked-item-text img {
   vertical-align: middle;
   display:inline-block;
}
 
 
 
 
 
 
 
/* цвет тента */
label.roof-color {
  display: inline-block;
  vertical-align: top;
}
label.roof-color input {
  display: none;
}
label.tent-color input#t-color-1+div {
  background: #82a5bb;
}
label.roof-color input+div {
  width: 24px;
  height: 24px;
  text-align: center;
  opacity: 0.8;
  border: 1px solid #000;
  box-sizing: border-box;
}
label.roof-color input:checked+div {
  opacity: 1;
}
label.roof-color input+div i {
  display: none;
  line-height: 24px;
  font-size:18px;
}
label.roof-color input:checked+div i {
  display: block;
  top: -2px;
  position: relative;
}
 
label.roof-color input+div:hover::before {
  content: attr(data-title);
  position: relative;
  top: -40px;
  left: -100%;
  padding: 5px 10px;
  border: 1px solid #333;
  background: rgba(255,255,230,1);
}
label.roof-color input+div:hover::after {
  content: '';
  display: block;
  position: relative;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0,0,0,.7);
  opacity: 1;
  top:...

JavaScript

$(function() {
var arr_thumb = ['1_thumb.jpg','2_thumb.jpg','3_thumb.jpg','4_thumb.jpg','5_thumb.jpg','6_thumb.jpg','7_thumb.jpg','8_thumb.jpg','9_thumb.jpg','10_thumb.jpg','11_thumb.jpg','12_thumb.jpg','13_thumb.jpg','14_thumb.jpg','15_thumb.jpg','16_thumb.jpg','17_thumb.jpg','18_thumb.jpg','19_thumb.jpg','20_thumb.jpg','21_thumb.jpg','22_thumb.jpg','23_thumb.jpg','24_thumb.jpg','25_thumb.jpg','26_thumb.jpg','27_thumb.jpg','28_thumb.jpg','29_thumb.jpg','30_thumb.jpg','31_thumb.jpg','32_thumb.jpg','33_thumb.jpg','34_thumb.jpg','35_thumb.jpg','36_thumb.jpg','37_thumb.jpg','38_thumb.jpg','39_thumb.jpg','40_thumb.jpg','41_thumb.jpg','42_thumb.jpg','43_thumb.jpg','44_thumb.jpg','45_thumb.jpg','46_thumb.jpg','47_thumb.jpg','48_thumb.jpg','49_thumb.jpg','50_thumb.jpg','51_thumb.jpg','52_thumb.jpg','53_thumb.jpg','54_thumb.jpg','55_thumb.jpg','56_thumb.jpg','57_thumb.jpg','58_thumb.jpg','59_thumb.jpg','60_thumb.jpg','61_thumb.jpg','62_thumb.jpg','63_thumb.jpg','64_thumb.jpg','65_thumb.jpg','66_thumb.jpg','67_thumb.jpg','68_thumb.jpg','69_thumb.jpg','70_thumb.jpg','71_thumb.jpg','72_thumb.jpg','73_thumb.jpg','74_thumb.jpg','75_thumb.jpg','76_thumb.jpg','77_thumb.jpg','78_thumb.jpg','79_thumb.jpg','80_thumb.jpg','81_thumb.jpg','82_thumb.jpg','83_thumb.jpg','84_thumb.jpg','85_thumb.jpg','86_thumb.jpg','87_thumb.jpg','88_thumb.jpg','89_thumb.jpg','90_thumb.jpg','91_thumb.jpg','32_thumb.jpg','33_thumb.jpg','34_thumb.jpg','35_thumb.jpg','36_thumb.jpg','97_thumb.jpg','98_thumb.jpg','99_thumb.jpg','100_thumb.jpg','101_thumb.jpg','102_thumb.jpg','103_thumb.jpg','104_thumb.jpg','105_thumb.jpg','106_thumb.jpg','107_thumb.jpg','108_thumb.jpg','109_thumb.jpg','110_thumb.jpg','111_thumb.jpg','112_thumb.jpg','113_thumb.jpg','114_thumb.jpg','115_thumb.jpg','116_thumb.jpg','117_thumb.jpg','118_thumb.jpg','119_thumb.jpg','120_thumb.jpg']
var arr_preview =...