JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="wrap">
    <div class="circle horizontal c1">
      <div class="wrap-electron">
        <div class="circle electron"></div>
      </div>
    </div>
    <div class="circle vertical c1">
      <div class="wrap-electron">
        <div class="circle electron"></div>
      </div>
    </div>
  </div>
  <div class="wrap r">
    <div class="circle horizontal c2">
      <div class="wrap-electron">
        <div class="circle electron"></div>
      </div>
    </div>
    <div class="circle vertical c2">
      <div class="wrap-electron">
        <div class="circle electron"></div>
      </div>
    </div>
    <div class="circle center"></div>
  </div>
</div>

CSS

body {
  background: #222222;
}
.container {
  position: relative;
  margin: auto;
  width: 250px;
}
.wrap,
.circle {
  -webkit-transition: -webkit-transform 500ms linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 500ms linear;
  -moz-transform-style: preserve-3d;
  width: 250px;
  height: 250px;
  margin: auto;
  margin-top: 50px;
  position: absolute;
}
.circle {
  position: absolute;
  border: 3px solid #aaaaaa;
  border-radius: 250px;
  margin: auto;
}
.circle.c2,
.circle.center {
  border: 2px solid #666666;
  width: 140px;
  height: 140px;
  top: 55px;
  left: 55px;
}
.circle.center {
  background: #ffffff;
  width: 30px;
  height: 30px;
  top: 110px;
  left: 110px;
  box-shadow: 0 0 5px #fff;
}
.wrap-electron {
  border: 0px solid  #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: electron 3s linear infinite;
  -moz-animation: electron 3s linear infinite;
}
.electron {
  width: 12px;
  height: 12px;
  background: #aaaaaa;
  left: 50%;
  margin-left: -8px;
  border: none;
  top: -7px;
  -webkit-transform-origin: 50% 50%;
}
.c2 .wrap-electron {
  -webkit-animation: electron 2s linear infinite;
  -moz-animation: electron 2s linear infinite;
}
.c2 .electron {
  top: -6px;
}
.wrap {
  border: 0px solid #aaaaaa;
  -webkit-animation: lateral 15s ease-in-out infinite;
  -moz-animation: lateral 15s ease-in-out infinite;
}
.wrap.r {
  -webkit-animation: lateralRevert 8s linear infinite;
  -moz-animation: lateralRevert 8s linear infinite;
}
.vertical {
  -webkit-animation: vertical 8s linear infinite;
  -moz-animation: vertical 8s linear infinite;
}
.horizontal {
  -webkit-animation: horizontalRevert 6s linear infinite;
  -moz-animation: horizontalRevert 6s linear infinite;
}
.vertical.c2 {
  -webkit-animation: vertical 4s linear infinite;
  -moz-animation: vertical 4s linear infinite;
}
.horizontal.c2 {
  -webkit-animation: horizontalRevert 3s linear infinite;
  -moz-animation: horizontalRevert 3s linear...

JavaScript

(function(d, $, op) {
    var op = $.extend({text: 'STRESS CSS',
                       stress_script: 'http://andy.edinborough.org/demos/css-stress/stressTest.js',
                      }, op)
      , wid_cnt = $('<div id="wid_cnt" />')
            .css(op.cnt_style || {'cursor': 'pointer',
                                  'position': 'fixed',    
                                  'white-space': 'nowrap',
                                  'top': '50%',
                                  'right': '0',
                                  'width': '30px',
                                  'padding': '0',
                                  'margin': '0',
                                  'z-index': '16776274',
                                  '-webkit-transform': 'rotate(-90deg)',
                                  '-moz-transform': 'rotate(-90deg)',
                                  '-ms-transform': 'rotate(-90deg)',
                                  '-o-transform': 'rotate(-90deg)',
                                  'transform': 'rotate(-90deg)',
                                  '-webkit-transform-origin': '50% 50%',
                                  '-moz-transform-origin': '50% 50%',
                                  '-ms-transform-origin': '50% 50%',
                                  '-o-transform-origin': '50% 50%',
                                  'transform-origin': '50% 50%',
                                  'filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'})
            .click(function(e) {
                var s = d.createElement('script'),
                    doit = function () {
                        if (window.stressTest) {
                            stressTest.bookmarklet();
                        } else {
                            setTimeout(doit, 100);
                        }
                    };
                s.src = op.stress_script + '?_=' + Math.random();
                (d.body ||...