JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div class="cir-pos">

   <div class="double"></div>

  <div class="single"></div>



  <div id="eid_1516858027443" style="position: relative; height: 100px; width: 100px; transform:                  translateZ(0px);">
    <div id="eid_1516858027443_txt" class="eid_1516858027443_txt_id" style="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;">
      <div data-icon="1" class="icon">d </div>
    </div>
  </div>


</div>

CSS

body {
  background-color: #000;
}

.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: 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;
}