JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<div class="circle-container">
  <div class="circle circle-less-skilled">
    <p class="circle-text"> Circle Text</p>
    <div class="hover-text">
      This is the hover text 1
    </div>
  </div>
  <div class="circle circle-skilled">
    <p class="circle-text"> Circle Text</p>
    <div class="hover-text">
      This is the hover text 2
    </div>
  </div> 
  <div class="circle circle-talented">
    <p class="circle-text"> Circle Text</p>
    <div class="hover-text">
      This is the hover text 3
    </div>
  </div> 
  <div class="circle circle-over-used">
    <p class="circle-text"> Circle Text</p>
    <div class="hover-text">
      This is the hover text 4
    </div>
  </div>   
</div>

CSS

.circle-container {
  position: relative;
  height: 400px;
  border: 1px solid red;
}

.circle {
  display: inline-block;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  color: #fff;
}

.hover-text {
  position: absolute;
  display:none;
  bottom: 0;
  left: 0;
  right:0;
  top: 250px;
  border: 1px solid #000;
  color: #000;
}

.circle:hover > .hover-text {
  display: block;
}

.hover-text::before {
  position: absolute;
  content: ' ';
  height: 0;
  width: 0;
  top: -40px;
  border-bottom: 40px solid #000;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.circle-less-skilled {
  background-color: green;
}

.circle-less-skilled > .hover-text {
  border-color: green;
}

.circle-less-skilled > .hover-text:before {
  left: 75px;
  border-bottom-color: green;
}

.circle-skilled {
  background-color: blue;
}

.circle-skilled > .hover-text {
  border-color: blue;
}

.circle-skilled > .hover-text:before {
  left: 275px;
  border-bottom-color: blue;
}

.circle-over-used {
  background-color: red;
}

.circle-talented {
   background-color: yellow;
}