Как стилизовать табы в карточке товара в Tilda

1. Создаем футер для карточки товара в Tilda

2. Добавляем на эту страницу блок html

3. Вставляем следующий код

<style>

/* Скрываем артикул в попап карточке товара и на странице товара по прямой ссылке */

.t-store__prod-popup__sku {
display: none !important;
}
/* Изменить размер шрифта описания табов в попап карточке товара */
.t-descr_xxs {
font-size: 16px;
line-height: 1.55;
}
/* Изменить размер шрифта описания табов в попап карточке товара для мобильной версии*/
@media (max-width: 640px) {
.t-descr_xxs {
font-size: 14px;
line-height: 1.55;
}
}
/* Изменить параметры шрифта заголовка табов в попап карточке товара */
.t-store .t-store__tabs__controls .t-store__tabs__button-title, .t-store .t-store__tabs__item .t-store__tabs__item-title {
font-weight: 700;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
font-size: 22px;
}
/* Изменить параметры шрифта заголовка табов в попап карточке товара для мобильной версии*/
@media (max-width: 640px) {
.t-store .t-store__tabs__controls .t-store__tabs__button-title, .t-store .t-store__tabs__item .t-store__tabs__item-title {
font-size: 18px;
line-height: 1.35;
font-weight: 700;
}
}
/* Задать оформление табов в попап карточке товара */
.t-store .t-store__tabs .t-store__tabs__button, .t-store .t-store__tabs_accordion .t-store__tabs__item-button {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eee; /* Подчеркивание */
cursor: pointer;
background: #e5e5e5; /* Цвет фона */
border-radius: 5px; /* Скругление углов */
margin: 0 4px 0 0; /* Отступ между карточек */

}
#rec724781655 .t-store .t-store__tabs__controls .t-store__tabs__button_active, #rec724781655 .t-store .t-store__tabs__controls .t-store__tabs__button:hover, #rec724781655 .t-store .t-store__tabs_snippet .t-store__tabs__controls .t-store__tabs__button:first-child {
border-bottom: 1px solid rgba(31, 30, 26, 1); /* Подчеркивание активного таба */
background: white; /* Цвет фона активного таба */
}
/* Задать оформление табов в попап карточке товара для мобильной версии*/
@media screen and (max-width: 560px) {
.t-store .t-store__tabs__controls .t-store__tabs__button-title {
position: relative;
padding-top: 5px; /* Внутренний верхний отступы таба */
padding-bottom: 5px; /* Внутренний нижний отступы таба */
}
}
</style>

Получились вот такие табы, можно менять цвет, убирать нижнее подчеркивание и др.

Поставьте лайк, если пост был вам полезен. Это помогает развивать канал.