JSFiddle - React, Tailwind, and code Playground

by Ilhom Maksadkulov

HTML

<div class="item-details-info">
                            <ul class="item-tabs group">
                                <li class="tab1 active"><a class="tab-link active tl1" href="#">Характеристики</a></li>
                                <li class="tab2"><a class="tab-link tl2" href="#">Короткие описание</a></li>
                                <li class="tab3"><a class="tab-link tl3" href="#">Отзывы(10)</a></li>
                            </ul>
                            <div class="tabbed-content">
                                <div class="tab1 active">
                                    <table class="item-chars">
                                        <tr>
                                            <th>Материал</th>
                                            <td>бязь(100% хлопок)</td>
                                        </tr>
                                        <tr>
                                            <th>Комплектация</th>
                                            <td>пододеяльник: 145х215см</td>
                                        </tr>
                                        <tr>
                                            <th>Простиня</th>
                                            <td>150х220см</td>
                                        </tr>
                                        <tr>
                                            <th>Две навалочки</hd>
                                            <td>50х70см.</td>
                                        </tr>
                                        <tr>
                                            <th>Цвет</th>
                                            <td><span class="color-st" style="background-color: #a3c000;"></span>Салатовый</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="collapse"><a href="#" class="tab-link show-all">Раскрыть все...

CSS

/*Стилизация Табуларная информации*/
.item-details-info {
  position: relative;
  box-shadow: 0 0 1px red;
  background-color: #f5f5f5;
  min-height: 270px;
  width: 392px;
  padding-left: 20px;
  padding-right: 20px;
  left: -20px;
  top: 60px;
}
.item-details-info .tab-link {
  font-size: 13px;
  border-bottom: none;
  color: #666;
}
.item-details-info .tab-link.active {
  color: #000;
}

.item-tabs {
  list-style: none;
  padding: 0;
  position: relative;
}
.item-tabs:before {
  content: '';
  position: absolute;
  width: 1000px;
  height: 5px;
  background-color: #e8e8e8;
  top: 38px;
  left: -606px;
  z-index: 0;
}
.item-tabs li {
  float: left;
  margin-right: 30px;
  border-bottom: 5px solid transparent;
}
.item-tabs li:last-child {
  margin-right: 0;
}
.item-tabs li.active {
  border-bottom: 5px solid #a3c1d4;
  position: relative;
}
.item-tabs li.active:after {
  top: 100%;
  left: 38%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(163, 193, 212, 0);
  border-top-color: #a3c1d4;
  border-width: 12px;
  margin-left: -12spx;
}
.item-tabs li.tab3:after {
  left: 34%;
}

.tabbed-content > div {
  display: none;
}
.tabbed-content > div.active {
  display: inherit;
}

.item-chars {
  font-size: 12px;
  font-family: Arial;
}
.item-chars tr:nth-child(odd) {
  background-color: #dce5eb;
}
.item-chars tr:nth-child(even) {
  background-color: transparent;
}
.item-chars th, .item-chars td {
  padding-left: 20px;
  color: #000;
}
.item-chars td {
  height: 35px;
  line-height: 35px;
  width: 200px;
}
.item-chars td.collapse {
  text-align: center;
}
.item-chars th {
  width: 150px;
  text-align: left;
}
.item-chars .show-all {
  position: relative;
}
.item-chars .show-all:after {
  top: 7px;
  right: -12px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(139, 139, 139, 0);
 ...

JavaScript

$(".item-tabs .tab1 a").click(function(e){
    e.preventDefault();
    $(".item-details-info .active").removeClass("active");
    $(".tab1, .tl1").addClass("active");
});

$(".item-tabs .tab2 a").click(function(e){
    e.preventDefault();
    $(".item-details-info .active").removeClass("active");
    $(".tab2, .tl2").addClass("active");
});

$(".item-tabs .tab3 a").click(function(e){
    e.preventDefault();
    $(".item-details-info .active").removeClass("active");
    $(".tab3, .tl3").addClass("active");
});