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 class="roof-color">
        <input id="t-color-3" name="roofcolor"...

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: -33px;
 ...

JavaScript

$('#form1').on('click', 'input', function (event) {
	floor = $(this).attr('value');
	console.log(floor);
  document.getElementById('result1').innerHTML = '(||||   ' + floor + '   ||||) ';
})
$('#form2').on('click', 'input', function (event) {
	roof = $(this).attr('value');
	console.log(roof);
  document.getElementById('result2').innerHTML = '(||||   ' + roof + '   ||||) ';
})
$('#form3').on('click', 'input', function (event) {
	constract = $(this).attr('value');
	console.log(constract);
  document.getElementById('result3').innerHTML = '(||||   ' + constract + '   ||||) ';
})