JSFiddle - React, Tailwind, and code Playground

by Никита Егоров

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <div class="hover">
         <span class="text text-1">1</span>
         <span class="text text-2">2</span>
         <span class="text text-3">3</span>
         <div class="block">
           <span class="circle circle-1"></span>
           <span class="circle circle-2"></span>
           <span class="circle circle-3"></span>
         </div>
      </div>
    </div>
  </div>
</div>

SCSS

.row {
  margin-top: 20px;
}

.col {
  border: none;
  padding: 10px;
  
}

.hover {
 
   display: flex;
   
    .text {
      text-align: center;
      width: 100%;
      border: 1px #000 solid;
      z-index: 9;
      &-1 {
        &:hover ~ .block .circle-1 {
          background: red;
        }
      }
      &-2 {
        &:hover ~ .block .circle-2 {
          background: green;
        }
      }
      &-3 {
        &:hover ~ .block .circle-3 {
          background: blue;
        }
      }
    }
    .block {
       position: absolute;
       width: 100%;
       text-align: center;
       z-index: 8;
           .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #000;
            border-radius: 100px;
            padding: 10px 0px;
            z-index: 9;
          }
    }
}