JSFiddle - React, Tailwind, and code Playground
HTML
<script src='//yagool.ru/blurb/jquery_1.8.3.js'></script>
<script src='//yagool.ru/blurb/icheck.js'></script>
<div class="pricePlans">
<ul id="plans">
<li class="plan">
<ul class="planContainer">
<li class="title"><h2>Стандарт</h2></li>
<li class="price"><p>3'000 / месяц</p></li>
<li>
<ul class="options">
<li>Добавление в базу <span>+</span></li>
<li>СМС-рассылок <span>0</span></li>
</ul>
</li>
<li id="flag1" class="btn">
<input id="tarif" name="iCheck" type="radio">
<a class="bestPlanButton" href="#"><label>Мой выбор</label></a>
</li>
</ul>
</li>
<li class="plan">
<ul class="planContainer">
<li class="title"><h2 class="bestPlanTitle">Информ</h2></li>
<li class="price"><p class="bestPlanPrice">5'000 / месяц</p></li>
<li>
<ul class="options">
<li>Добавление в базу <span>+</span></li>
<li>СМС-рассылок <span>1</span></li>
</ul>
</li>
<li id="flag2" class="btn">
<input id="tarif" name="iCheck" type="radio" checked>
<a class="bestPlanButton" href="#"><label>Мой выбор</label></a>
</li>
</ul>
</li>
</ul>
</div>
<select class='k_select' id='k_input_field_30_4700' value='Стандарт' > <!-- Поле после отладки поле будет скрыто -->
<option value=''></option>
<option selected value='Стандарт'>Стандарт</option>
<option value='Информ'>Информ</option>
</select>
CSS
div #plans,div #plans ul,div #plans ul li {
margin: 0;
padding: 0;
list-style: none;
}
div.pricePlans:after {
content: '';
display: table;
clear: both;
}
div.pricePlans {
font-family: 'Open Sans', sans-serif;
zoom: 1;
}
div.pricePlans {
max-width: 600px;
margin: 0 auto;
padding-left: 15px;
}
div.pricePlans #plans .plan {
background: #fff;
float: left;
width: 280px;
text-align: center;
border-radius: 5px;
margin: 0 10px 10px 0;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.planContainer .title h2 {
font-size: 1.8em;
font-weight: 300;
color: #3e4f6a;
margin: 0;
padding: .4em 0;
}
.planContainer .title h2.bestPlanTitle {
background: #3e4f6a;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff;
border-radius: 5px 5px 0 0;
}
.planContainer .price p {
background: #3e4f6a !important;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff !important;
font-size: 1.2em !important;
font-weight: 700 !important;
height: 2.2em !important;
line-height: 2.0em !important;
width: 257px !important;
margin-left: 0 !important;
padding: 4px;
}
.planContainer .price p.bestPlanPrice {
background: #f7814d !important;
}
.planContainer .price p span {
color: #8394ae !important;
}
.planContainer .options {
margin-top: 4em !important;
}
.planContainer .options li {
font-weight: 700 !important;
color: #364762 !important;
line-height: 2.0em !important;
}
.planContainer .options li span {
font-weight: 600;
...
JavaScript
$(document).ready(function(){$(".pricePlans input").each(function(){var a=$(this),b=a.next(),c=b.text();b.remove();a.iCheck({radioClass:"iradio",insert:''+c})})});