JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="cir-pos">
  <div class="single"></div>
  <div class="double"></div>
  <div id="text1" >
      <div  class="icon-text">
      <div data-icon="1" class="icon"> K </div>
    </div>
  </div>
</div>

CSS

body {
  background-color: #000;
  padding:20%;
}


.text1 {
  position: relative; height: 100px; width: 100px; transform:                  translateZ(0px);
}
.icon-text {
  position: absolute; margin:           0px; left: 0px; top: 22px; width: 100px; height: auto; right: auto; bottom: auto; <-webkit-tap->            </-webkit-tap->highlight-color: rgba(0, 0, 0, 0); font-family: icon-font, Arial, sans-serif;                   font-size: 60px; color: rgb(255, 255, 255); font-weight: 400; text-decoration: none; font-style:                normal; text-align: center; line-height: 60px;
}

.cir-pos {
  position: absolute;
  margin: 0px;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  right: auto;
  bottom: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0px);
  opacity: 1;
  transition: opacity 0.15s ease-in 0.25s;
}

.single {
  position: absolute;
  margin: 0px;
  left: 0px;
  top: 0px;
  width: 80px;
  height: 80px;
  right: auto;
  bottom: auto;
  border-radius: 50%;
  transform-origin: 50% 50% 0px;
  transform: translate(6px, 6px) translateZ(0px) rotate(0deg) scale(1, 1);
  opacity: 1;
  border: 4px solid rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
}

.double {
  position: absolute;
  margin: 0px;
  left: 0px;
  top: 0px;
  width: 96px;
  height: 96px;
  right: auto;
  bottom: auto;
  border-radius: 50%;
  transform-origin: 50% 50% 0px;
  transform: translate(-6px, -6px) translateZ(0px) rotate(0deg) scale(1, 1);
  opacity: 0.4;
  border: 8px solid rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform-style: preserve-3d;
}

.single:hover {
  position: absolute;
  margin: 0px;
  left: 0px;
  top: 0px;
  width: 100px;
  height: 100px;
  right: auto;
  bottom: auto;
  border-radius: 50%;
  transform-origin: 50% 50% 0px;
  transform: translate(-6px, -6px)...