JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="radio" name="r" id="r1" checked>
<label for="r1">First-Class Mail International</label>
<strong>Сроки: 3-6 недель. Трекинг, Страховка</strong>
<p>К доставке не принимается алкоголь, табачные изделия, оружие и их части и т.д. Подробнее см. <a href="#">здесь</a>. География доставки: все регионы РФ и СНГ.</p>
<em><strong>26,00$</strong> ~857,04 р.</em>
<span></span>
</div>
<div>
<input type="radio" name="r" id="r2">
<label for="r2">First-Class Mail International</label>
<strong>Сроки: 3-6 недель. Трекинг, Страховка</strong>
<p>К доставке не принимается алкоголь, табачные изделия, оружие и их части и т.д. Подробнее см. <a href="#">здесь</a>. География доставки: все регионы РФ и СНГ.</p>
<em><strong>26,00$</strong> ~857,04 р.</em>
<span></span>
</div>
CSS
div {
position: relative;
padding: 16px 40px 24px 64px;
width: 280px;
font: normal 11px/14px Helvetica, Arial, sans-serif;
background: #fff;
border: 1px solid #ddd;
}
div:first-child {
border-bottom: none;
}
div input {
position: absolute;
left: 32px;
top: 14px;
cursor: pointer;
}
label {
display: block;
padding-bottom: 6px;
font-size: 14px;
line-height: 18px;
font-weight: bold;
cursor: pointer;
}
div > strong {
display: block;
padding-bottom: 6px;
color: #0073bb;
font-weight: normal;
}
a {
color: #0073bb;
text-decoration: underline;
}
em {
display: block;
padding-top: 12px;
font-size: 18px;
color: #8fa4ae;
font-style: normal;
}
em strong {
color: #0073bb;
}
p {
margin: 0;
padding: 0;
}
div > * {
position: relative;
z-index: 2;
}
span {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .2;
}
input:checked ~ span {
background: url(http://cs628323.vk.me/v628323904/2a3f9/SHK0nePpk3Y.jpg) no-repeat center top;
background-size: cover;
}