JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<div class="floor-chechbox row">
	<div class="col-md-12">
		<label class="floor-radio">
			<input id="fr" name="floor_price" value="1" 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="floor_price" value="2" 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="floor_price" value="3" 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="floor_price" value="4" 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>

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;
}
/* //блок цена с полом и без пола */