JSFiddle - React, Tailwind, and code Playground

by gsv60

HTML

<div class="f-types__tabs">
  <button class="tablinks" onclick="openTab(event, '1')" id="defaultOpen">Популярные<span class="h-register">12</span></button>
  <button class="tablinks" onclick="openTab(event, '2')">Горячее<span class="h-register">74</span></button>
  <button class="tablinks" onclick="openTab(event, '3')">Гарниры<span class="h-register">16</span></button>
  <button class="tablinks" onclick="openTab(event, '4')">Выпечка<span class="h-register">31</span></button>
</div>

CSS

.f-types__tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: scroll;
}

.h-register {
  font: 12px TT Norms, sans;
  position: relative;
  font-weight: 600;
  top: -0.9em;
  opacity: 0.3;
  transition-duration: .2s;
}

.tablinks {
  color: #333333;
  border: none;
  position: relative;
  outline: none;
  cursor: pointer;
  font: var(--title-card-font);
  font-weight: 600;
  padding: 0;
  background-color: transparent;
  height: 88px;
  display: flex;
  margin-right: 44px;
  transition-duration: .2s;
  padding: 14px 0 14px 0;
}

.tablinks:before {
  content: "";
  position: absolute;
  left: 30%;
  bottom: 0;
  height: 1px;
  width: 30%;
  border-bottom: 2px solid #F22C2C;
  opacity: 0;
  transition-duration: .2s;
}

.tablinks:hover:before .h-register {
  color: #F22C2C;
  opacity: 1;
}

.tablinks:hover .h-register {
  color: #F22C2C;
  opacity: 1;
}

.tablinks:hover {
  color: #F22C2C;
}

.tablinks:hover:before {
  border-color: #F22C2C;
  color: #F22C2C;
  opacity: 1;
}

.f-types__tabs button.active {
  color: #F22C2C;
  opacity: 1;
}