JSFiddle - React, Tailwind, and code Playground

by gsv60

HTML

<div class="header__options-circles">
  <buttons class="options__circles">
       Торговать
  </buttons>
  <buttons class="options__circles">
        Инвестировать
  </buttons>
  <buttons class="options__circles">
        Привлекать инвесторов
  </buttons>
</div>
<section class="content_a">
  <div class="wrapper">
    <div class="content__tabs">
      <button class="tablinks" onclick="openTab(event, '1')" id="defaultOpen">Торговать</button>
      <button class="tablinks" onclick="openTab(event, '2')">Инвестировать</button>
      <button class="tablinks" onclick="openTab(event, '3')">Привлекать инвесторов</button>
    </div>
    </div>
    </section>

CSS

/*-----Circles-----*/

.header__options-circles {
  display: flex;
  justify-content: center;
}
.options__circles {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 264px;
  height: 264px;
  border-radius: 182px;
  background-color: rgba(240, 243, 244, 0.6);
  margin-right: 52px;
  font: 18px/normal 'PFDinTextCompPro-Light', sans;
  text-decoration: none;
  color: #171717;
  position: relative;
  cursor: pointer;
}

.options__circles::after {
  opacity: 0;
  content: '';
  border-radius: 177px;
  border: 2px solid #00b0a2;
  width: 244px;
  height: 244px;
  position: absolute;
  top: 8px;
  left: 8px;
  transition-duration: .3s;
}

.options__circles:hover::after {
  opacity: 1;
}

/*------Tabs-----*/

.content_a {
  background-image: url(../img/bg1.png);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.content__tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #c5c5c2;
}

.tablinks {
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  font: 28px/normal 'PFDinTextCompPro-Light', sans;
  color: #565654;
  width: 100%;
  transition-duration: .3s;
  padding: 48px 0 48px 0;
  border-bottom: 3px solid transparent;
  position: relative;
  top: 2px;
}


.tablinks:hover {
  border-color: #009e82;
  color: #009e82;
}