JSFiddle - React, Tailwind, and code Playground

by Raloynner

HTML

<div class="container">
    <div class="flex-container">
      <div class="text-container">
        <div class="terms">
          <h2 class="h2-v2">Указатель терминов</h2>
          <div class="terms-pointer">
            <div class="terms-pointer-item">
              <a href="#pointer-А" class="subtitle-v3">А</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#pointer-Б" class="subtitle-v3">Б</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#pointer-В" class="subtitle-v3">В</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Г</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Д</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Е</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Ж</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">З</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">И</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">К</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Л</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">М</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">Н</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">О</a>
            </div>
            <div class="terms-pointer-item">
              <a href="#" class="subtitle-v3">П</a>
            </div>
            <div...

SCSS

// Terms
.terms .h2-v2 {
  margin-bottom: 40px;
  @media (max-width: 960px) {
    margin-bottom: 30px;
  }
}

.terms-pointer {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
  @media (max-width: 960px) {
    margin-bottom: 40px;
  }
}

.terms-pointer-item {
  width: 40px;
  height: 40px;
  position: relative;
  background: inherit;
}

.terms-pointer-item:hover {

  border-radius: 50%;
}

.terms-pointer-item a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}

.terms-columns {
  display: flex;
  flex-direction: column;
}

.terms-letter {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
  @media (max-width: 960px) {
    margin-bottom: 40px;
  }
}

.terms-letter .h2-v2 {
  margin-bottom: 30px;
  @media (max-width: 960px) {
    margin-bottom: 20px;
  }
}

.terms-letter-inner {
  columns: 2;
}

.terms-letter-inner li {
  margin-bottom: 15px;
}

.terms-letter-inner li a {
  color: #5F5F63;
}