JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Противогололедные реагенты</h1>

<div class="post-image reagent"><span>Противогололедные реагенты</span></div>

<img src="/img/reagent/icons.jpg" alt="">

<div class="clear"></div>

<h2>Антигололедные реагенты купить</h2>
<section class="tabs">
  <input id="tab_1" type="radio" name="tab" checked />
  <input id="tab_2" type="radio" name="tab" />
  <label for="tab_1" id="tab_l1"> Аквайс  </label>
  <label for="tab_2" id="tab_l2"> Rockmelt </label>
  <div style="clear:both"></div>
  <div class="tabs_cont">
   <div id="tab_c1">
 
<div class="pricelist"> 
 <a name="a25"></a>
  <div class="pricelist-block">
        <div class="pricelist-img">
              <img src="/img/reagent/1.jpg" title="Антигололедный реагент" alt="Противогололедный реагент">
        </div>
        <div class="pricelist-info">

        <span class="iconr hint  hint--bottom  hint--info" data-hint="Используется при температуре до -25°"><img src="/img/reagent/25C.jpg" alt=""></span>
            <h2>Аквайс -25°</h2> 
            <p>Состав: хлорид натрия и кальция.</p>
            <p>Популярный вид антигололедного реагента!</p>
<p>Используется автомобильных дорогах и пешеходных зонах. Разрушает ледяную корку путем нарушения структуры льда. Высокоэффективен при температурах до -25°.
</p>
            <span class="pricezp"><span> <a href="/reagenty/akvajs-25.htm">Подробнее...</a></span></span>
            <img src="/img/reagent/9.jpg" alt="">
        </div>
    <div class="clear"></div>
  </div>
   <a name="abi"></a>
  <div class="pricelist-block">
        <div class="pricelist-img">
              <img src="/img/reagent/2.jpg" title="Противогололедный реагент" alt="Противогололедный реагент">
        </div>
        <div class="pricelist-info">
        <span class="iconr hint  hint--bottom  hint--warning" data-hint="Не способствует корозии"><img src="/img/reagent/auto.jpg" alt=""></span>
        <span class="iconr hint  hint--bottom  hint--success2" data-hint="Безопасен для животных"><img...

CSS

.tabs {
position: relative;
margin: 0 auto;
width: 720px;
}
.tabs label {
color: #000;
cursor: pointer;
display: block;
float: left;
width: 150px;
height: 45px;
line-height: 45px;
position: relative;
top: 2px;
text-align: center;
font-size: 15px;
text-transform: uppercase;
background: linear-gradient(to bottom, #ffffff 0%,#eff0f4 4%,#dddee0 100%);
border-bottom: 1px solid #929292;
border-radius: 10px 10px 0 0;
z-index: 22;
}
.tabs input {
position: absolute;
left: -9999px;
}
#tab_1:checked  ~ #tab_l1,
#tab_2:checked  ~ #tab_l2,
#tab_3:checked  ~ #tab_l3 {
border-color: #fff;
top: 0;
z-index: 3;
border-left: 1px solid #929292;
border-right: 1px solid #929292;
border-top: 1px solid #929292;
background: linear-gradient(to top, #ffffff 0%,#eff0f4 10%,#64A41A 100%);
}
.tabs_cont {
background: #fff;
position: relative;
z-index: 2;
}
.tabs_cont > div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
#tab_1:checked ~ .tabs_cont #tab_c1,
#tab_2:checked ~ .tabs_cont #tab_c2,
#tab_3:checked ~ .tabs_cont #tab_c3 {
position: static;
left: 0;
opacity: 1;
}