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="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" />
        <div data-title="Серый"><i>✔</i></div>
      </label>
      <label class="roof-color">
        <input id="t-color-2" name="roofcolor" value="roof_green" type="radio" />
        <div data-title="Зеленый"><i>✔</i></div>
      </label>
      <label...

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']
var arr_preview = ['1_preview.jpg','2_preview.jpg','3_preview.jpg','4_preview.jpg','5_preview.jpg','6_preview.jpg','7_preview.jpg','8_preview.jpg','9_preview.jpg','10_preview.jpg','11_preview.jpg','12_preview.jpg','13_preview.jpg','14_preview.jpg','15_preview.jpg','16_preview.jpg','17_preview.jpg','18_preview.jpg','19_preview.jpg','20_preview.jpg','21_preview.jpg','22_preview.jpg','23_preview.jpg','24_preview.jpg','25_preview.jpg','26_preview.jpg','27_preview.jpg','28_preview.jpg','29_preview.jpg','30_preview.jpg','31_preview.jpg','32_preview.jpg','33_preview.jpg','34_preview.jpg','35_preview.jpg','36_preview.jpg','37_preview.jpg','38_preview.jpg','39_preview.jpg','40_preview.jpg','41_preview.jpg','42_preview.jpg','43_preview.jpg','44_preview.jpg','45_preview.jpg','46_preview.jpg','47_preview.jpg','48_preview.jpg','49_preview.jpg','50_preview.jpg','51_preview.jpg','52_preview.jpg','53_preview.jpg','54_preview.jpg','55_preview.jpg','56_preview.jpg','57_preview.jpg','58_preview.jpg','59_preview.jpg','60_preview.jpg']
var arr_detail =...