JSFiddle - React, Tailwind, and code Playground

by aka_SKIff

HTML

<script type="text/x-template" id="tabs">
  <div class="tabs-cnt" data-tabs-list>
    <div class="tabs__list" data-tabs data-target="_info_">
      <slot></slot>
    </div>
  </div>
</script>
<div id="app">
  <tabs>
    <a href="#_info_1" class="tabs__item active" data-tabs-trigger @click.prevent="handler">Private Insurance</a>
    <a href="#_info_2" class="tabs__item" data-tabs-trigger>Личное страхование</a>
    <a href="#_info_3" class="tabs__item" data-tabs-trigger>АнтиКлещ</a>
  </tabs>
</div>
<div class="tabs__content" data-tabs-content id="_info_">
  <div class="tabs__pane active" data-tabs-pane id="_info_1">
    <div class="text styled">
      <p>Здоровье — самая главная ценность человека. Мы понимаем это и предлагаем нашим клиентам максимально выгодные решения в рамках страхования от несчастных случаев и болезней. Вы можете заявить о страховом через наш сайт. Для этого вам потребуется номер
        полиса.
      </p>
    </div>
  </div>
  <div class="tabs__pane" data-tabs-pane id="_info_2">
    <div class="text styled">
      <p>Здоровье — самая главная ценность человека. Мы понимаем это и предлагаем нашим клиентам максимально выгодные решения в рамках страхования от несчастных случаев и болезней. Вы можете заявить о страховом через наш сайт. Для этого вам потребуется номер
        полиса.
      </p>
      <p>Здоровье — самая главная ценность человека. Мы понимаем это и предлагаем нашим клиентам максимально выгодные решения в рамках страхования от несчастных случаев и болезней. Вы можете заявить о страховом через наш сайт. Для этого вам потребуется номер
        полиса.
      </p>
    </div>
  </div>
  <div class="tabs__pane" data-tabs-pane id="_info_3">
    <div class="text styled">
      <p>Здоровье — самая главная ценность человека. Мы понимаем это и предлагаем нашим клиентам максимально выгодные решения в рамках страхования от несчастных случаев и болезней. Вы можете заявить о страховом через наш сайт. Для этого вам потребуется номер
        полиса.
 ...

SCSS

[data-tabs-content] {
  position: relative;
  transition: height 0.4s;
  overflow: hidden;
  + [data-tabs-list] {
    margin-top: 100px;
  }
  [data-tabs-pane] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    &.active {
      opacity: 1;
      visibility: visible;
      position: static;
    }
    .text, .styled {
      padding-top: 40px;
      padding-bottom: 40px;
    }
  }
}

.tabs-cnt {
  position: relative;
}

.tabs__list {
  box-shadow: inset 0 -2px 0 0 rgba(#A0A0A0, 0.24);
}


.tabs__item {
  font-size: 16px;
  text-transform: uppercase;
  margin-right: 2.4rem;
  padding-bottom: 1.6rem;
  box-shadow: inset 0 -4px 0 0 transparent;
  transition: box-shadow 0.3s;
  display: inline-block;
  &.active {
    box-shadow: inset 0 -4px 0 0 #F36C21;
    &:hover {
      box-shadow: inset 0 -4px 0 0 #F36C21;
    }
  }
  &:hover {
    box-shadow: inset 0 -4px 0 0 rgba(#F36C21, 0.2);
  }
}

JavaScript

const Tabs = {
	template: '#tabs',
}
const App = new Vue({
	el: '#app',
  components: {
  	Tabs: Tabs
  },
  methods: {
  	handler: function () {
    	alert('aaa');
    }
  }
})