JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="container">
  <div class="constant">
        <div class="heightHandle">
            <div class="circle-main">
                <div class="electrons">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="circle-inner">
                    <div class="circle-travel">
                        <div class="crosshair"></div>
                        <div class="crosshair"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.02) 75%, transparent 75%, transparent 100%);
  background-size: 10px 10px;
  background-color: #d68d2f;
}
.container {
  position: relative;
  width: 50%;
  max-width: 400px;
  margin: 100px auto 100px;
  background: none;
}
.constant {
  position: relative;
  width: 100%;
}
.constant .heightHandle {
  position: absolute;
  display: block;
  width: 100%;
  padding-top: 100%;
}
.circle-main,
.circle-main:before,
.circle-main:after,
.circle-inner:before,
.circle-inner,
.circle-travel,
.circle-travel:before,
.circle-travel:after {
  box-shadow: inset 0 0 0 1px rgba(150, 42, 0, 0.5), inset 0 0 10px 2px rgba(150, 42, 0, 0.25);
}
.electrons span {
  box-shadow: 0 0 0 1px rgba(250, 216, 109, 0.5);
  background: rgba(250, 216, 109, 0.1);
}
.crosshair {
  background: rgba(150, 42, 0, 0.8);
}
.circle-main {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.circle-main:before,
.circle-main:after {
  content: "";
  position: absolute;
  border-radius: 4px;
}
.circle-main:before {
  width: 100%;
  height: 4px;
  top: 50%;
  margin-top: -2px;
  background: -webkit-linear-gradient(left, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-main:after {
  width: 4px;
  height: 100%;
  left: 50%;
  margin-left: -2px;
  background: -webkit-linear-gradient(top, rgba(150, 42, 0, 0.8) 0%, rgba(150, 42, 0, 0.1) 50%, rgba(150, 42, 0, 0.8));
}
.circle-inner {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  -webkit-animation: spin 6s linear infinite;
  background: -webkit-radial-gradient(center, ellipse cover, rgba(150,...