JSFiddle - React, Tailwind, and code Playground
HTML
<div class="price__category price__active">
<div class="price__category-item">
<img src="/img/urn.svg" alt="">
<span>Кремация</span>
</div>
<div class="price__category-item">
<img src="/img/funeral.svg" alt="">
<span>Захоронение</span>
</div>
</div>
<div class="priceinner__wrapper">
<div class="priceinner__item cremation">
<div class="priceinner__item-head">
<span>Базовый</span>
</div>
<div class="priceinner__item-price">
<span>13 900 руб</span>
<img src="/img/dove.svg" alt="">
</div>
<div class="priceinner__item-info">
<ul>
<li>Гроб деревянный, обитый тканью</li>
<li>Постель в гроб</li>
<li>Похоронный комплект шёлковый: подушка, покрывало, тапочки</li>
<li>Выезд ритуального агента</li>
<li>Транспорт 2 посадочных места</li>
<li>Доставка принадлежностей в морг</li>
<li>Заказ катафального транспорта</li>
</ul>
</div>
<div class="priceinner__item-btn">
<a href="#" class="btn btn__custom">Заказать</a>
</div>
</div>
<div class="priceinner__item cremation">
<div class="priceinner__item-head">
<span>Стандарт</span>
</div>
<div class="priceinner__item-price">
<span>13 900 руб</span>
<img src="/img/dove.svg" alt="">
</div>
<div class="priceinner__item-info">
<ul>
<li>Гроб деревянный, обитый тканью</li>
<li>Постель в гроб</li>
<li>Похоронный комплект шёлковый: подушка, покрывало, тапочки</li>
<li>Похоронный комплект шёлковый: подушка, покрывало, тапочки</li>
<li>Похоронный комплект шёлковый: подушка, покрывало, тапочки</li>
<li>Выезд ритуального агента</li>
<li>Транспорт 2 посадочных места</li>
<li>Доставка принадлежностей в морг</li>
<li>Заказ катафального транспорта</li>
</ul>
</div>
<div class="priceinner__item-btn">
<a href="#" class="btn btn__custom">Заказать</a>
</div>
</div>
...
CSS
$blue: #blue;
.price__category {
display: flex;
margin: 1rem 0;
.price__category-item {
background-color: #fff;
display: flex;
width: 50%;
justify-content: center;
align-items: center;
border: 1px solid $blue;
padding: 1.5rem 0;
&:hover {
cursor: pointer;
}
img {
width: 50px;
height: auto;
}
span {
font-size: 1.5rem;
}
@media (max-width: 536px) {
width: 100%;
}
}
.price__active {
background-color: $blue;
span {
color: #fff;
}
}
@media (max-width: 536px) {
flex-direction: column;
}
}
.priceinner__wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.priceinner__item {
background-color: #fff;
box-shadow: 0 0 7px 8px #eee;
display: flex;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
flex-direction: column;
justify-content: space-between;
width: 48%;
margin-bottom: 1rem;
.priceinner__item-head {
background-color: $blue;
text-align: center;
border-top-left-radius: 1rem;
padding: 1rem 0;
border-top-right-radius: 1rem;
span {
font-size: 1.5rem;
color: #fff;
}
}
.priceinner__item-price {
text-align: center;
padding: 1rem 0;
display: flex;
flex-direction: column;
overflow: hidden;
span {
font-size: 1.5rem;
color: $blue;
margin-bottom: .5rem;
font-weight: bold;
}
img {
height: 35px;
width: auto;
}
}
.priceinner__item-info {
display: flex;
flex-direction: column;
ul {
padding-inline-start: 0;
list-style: none;
margin-bottom: 0;
padding: .5rem;
li {
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
}
}
}
.priceinner__item-btn {
display:...
JavaScript
$(".price__category-item").click(function(e) {
e.preventDefault();
$(".price__category-item").removeClass('price__active');
$(this).addClass('price__active');
})