JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<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> <img src="http://deckman.ru/bitrix/templates/deckman/images/deckman-logo.png" class="deckman">
			</div>
		</label>
	</div>

</div>


<div class="check-color">
<div class="row">
  <div class="col-xs-6 block-tent-color">
    <div class="text-color-for-tent">
		<b>Цвет тента:</b>
    </div>
    <div id="form2" class="color-for-tent">

      <label class="tent-color">
        <input id="t-color-5" name="tentcolor" value="tent_white" type="radio" checked />
        <div data-title="Белый"><i>✔</i></div>
      </label>
      <label class="tent-color">
        <input id="t-color-1" name="tentcolor" value="tent_grey" type="radio" />
        <div data-title="Серый"><i>✔</i></div>
      </label>
      <label class="tent-color">
        <input id="t-color-2" name="tentcolor" value="tent_green" type="radio" />
        <div data-title="Зеленый"><i>✔</i></div>
      </label>
      <label class="tent-color">
        <input id="t-color-3" name="tentcolor"...

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.tent-color {
  display: inline-block;
  vertical-align: top;
}
label.tent-color input {
  display: none;
}
label.tent-color input#t-color-1+div {
  background: #82a5bb;
}
label.tent-color input+div {
  width: 24px;
  height: 24px;
  text-align: center;
  opacity: 0.8;
  border: 1px solid #000;
  box-sizing: border-box;
}
label.tent-color input:checked+div {
  opacity: 1;
}
label.tent-color input+div i {
	display: none;
	line-height: 24px;
	font-size:18px;
}
label.tent-color input:checked+div i {
	display: block;
	top: -2px;
	position: relative;
}
/* //цвет тента */

/*Подсказки для цветов тента*/
label.tent-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.tent-color input+div:hover::after {
  content: '';
  display: block;
  position: relative;
  height: 0;
  width: 0;
  border-left: 8px solid...

JavaScript

var floor;
var tent;
var constract;

 form1.onclick = function checkFloor(f) {
        f = f || window.event;
        target = f.target || f.srcElement;
        if (target.tagName != "INPUT") return;
        var floor = target.value;
        document.getElementById('result1').innerHTML = '(||||   ' + floor + '   ||||) ';
      }
      
form2.onclick = function checkTent(t) {
        t = t || window.event;
        target = t.target || t.srcElement;
        if (target.tagName != "INPUT") return;
        var tent = target.value;
				document.getElementById('result2').innerHTML = ' (||||   ' + tent + '   ||||) ';
      }

 form3.onclick = function checkConstract(c) {
        c = c || window.event;
        target = c.target || c.srcElement;
        if (target.tagName != "INPUT") return;
        var constract = target.value;
				document.getElementById('result3').innerHTML = ' (||||   ' + constract + '   ||||)';
      }