JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!-- meter -->
<div id="meter">
  <div id="measures">
    <p><p><p><p><p>
    <p><p><p><p><p>
    
    <p><p><p><p><p>
    <p><p><p><p><p>
    
    <p><p><p><p><p>
  </div>
  <h1>HORIZONTAL MOUSE VELOCITY</h1>
  <h2>px / sec</h2>
</div>
<!-- /meter -->

<!-- sensor -->
<div class="c  c0"><div class="c  c1"><div class="c  c2"><div class="c  c3"><div class="c  c4"><div class="c  c5"><div class="c  c6"><div class="c  c7"><div class="c  c8"><div class="c  c9">
<div class="c c10"><div class="c c11"><div class="c c12"><div class="c c13"><div class="c c14"><div class="c c15"><div class="c c16"><div class="c c17"><div class="c c18"><div class="c c19">
<div class="c c20"><div class="c c21"><div class="c c22"><div class="c c23"><div class="c c24"><div class="c c25"><div class="c c26"><div class="c c27"><div class="c c28"><div class="c c29">

<div class="c c30"><div class="c c31"><div class="c c32"><div class="c c33"><div class="c c34"><div class="c c35"><div class="c c36"><div class="c c37"><div class="c c38"><div class="c c39">
<div class="c c40"><div class="c c41"><div class="c c42"><div class="c c43"><div class="c c44"><div class="c c45"><div class="c c46"><div class="c c47"><div class="c c48"><div class="c c49">
<div class="c c50"><div class="c c51"><div class="c c52"><div class="c c53"><div class="c c54"><div class="c c55"><div class="c c56"><div class="c c57"><div class="c c58"><div class="c c59">

<div class="c c60"><div class="c c61">

<div class="n  n0"><div class="n  n1"><div class="n  n2"><div class="n  n3"><div class="n  n4"><div class="n  n5"><div class="n  n6"><div class="n  n7"><div class="n  n8"><div class="n  n9">
<div class="n n10"><div class="n n11"><div class="n n12"><div class="n n13"><div class="n n14"><div class="n n15"><div class="n n16"><div class="n n17"><div class="n n18"><div class="n n19">
<div class="n n20"><div class="n n21"><div class="n n22"><div class="n n23"><div class="n n24"><div class="n n25"><div class="n n26"><div class="n n27"><div...

CSS

/**
 *  @fileoverview  CSS3 SpeedMeter
 *  @author        Tohl SMALLFIELD
 */
html,body,div,p{
  margin: 0; padding: 0;
}
body{
  overflow: hidden;
  background-color: #000;
  font-family: myriad, helvetica, verdana, sans-serif;
}

/*------------------------------------------------
  #meter
------------------------------------------------*/
div#meter{
  position: absolute;
  top: 32px; left: 32px;
  width: 401px; height: 401px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop(.1, #333), color-stop(.7, #000), to(#000));
  background-image: -moz-linear-gradient(top, #555, #333, #000, #000);
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
  overflow: hidden;
  counter-reset: speed -390;
}
div#meter:before{
  position: absolute;
  top: 5px; left: 5px;
  display: block;
  content: "";
  width: 391px; height: 391px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#004), color-stop(.7, #000), to(#000));
  background-image: -moz-linear-gradient(top, #004, #000, #000);
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
}
div#meter:after{
  position: absolute;
  display: block;
  content: "";
  top: 181px; left: 181px;
  width: 40px; height: 40px;
  background-color: #000;
  -webkit-border-radius: 999px;
  -moz-border-radius:    999px;
  border-radius:         999px;
}


/*----- 数字＆目盛 -----*/
#measures{
  position: absolute;
  top: 0; left: 6px; right: 0; bottom: 0;
  -webkit-transform: rotate(-30deg);
  -moz-transform:    rotate(-30deg);
  transform:         rotate(-30deg);
}
p{
  position: absolute;
  top: 199px;
  width: 389px; height: 2px;
  counter-increment: speed 30;
}
p:nth-of-type(1) { -webkit-transform: rotate(  0deg); -moz-transform: rotate(  0deg); }
p:nth-of-type(2) { -webkit-transform: rotate( 10deg); -moz-transform: rotate( 10deg); }
p:nth-of-type(3) { -webkit-transform: rotate( 20deg);...