JSFiddle - React, Tailwind, and code Playground

HTML

<div id="letter">centivo.net</div>
<div id="description">is for Atom</div>

<div id="animation">
    <div class="ring one">
        <div class="electron"></div>
    </div>
    
    <div class="ring two">
        <div class="electron"></div>
        <div class="electron"></div>
    </div>
    
    <div class="ring three">
        <div class="electron"></div>
        <div class="electron"></div>
        <div class="electron"></div>
    </div>
</div>

<!--

tumblr embed code

<iframe src="http://s.codepen.io/boomerang/72dbf1724af73989ebf1a3aa715058411391578947496/index.html" width="500" height="300" style="display:block;background-color:transparent;overflow:hidden;" allowTransparency="false" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

-->

CSS

* {
    padding: 0;
    margin: 0;
}

html , body {
    width: 100%;
    height: 100%:
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0%;
}

html {
    background-color: rgba(248,253,255,1);    
}

#letter {
    font-size: 120px;
    font-family: Helvetica;
    font-weight: Bold;
    color: rgba(18,22,26,0.7);
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    z-index: 100;
}

#description {
    position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 100;
    font-family: Helvetica;
    font-weight: 200;
    color: rgba(18,22,26,0.7);
    text-align: center;
    font-size: 11px;
    letter-spacing: 1px;
}

.ring {
    border-radius: 1000px;
    border: 1px dashed rgba(18,22,26,0.1);
    position: absolute;
    top: 50%;
    left: 50%;
}

.ring.one {
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    
    animation: ringoneAni 1.3s linear 0s infinite normal none;
	-webkit-animation: ringoneAni 1.3s linear 0s infinite normal none;
}

.ring.two {
    width: 180px;
    height: 180px;
    margin-left: -90px;
    margin-top: -90px;
    
    animation: ringtwoAni 2.0s linear 0s infinite reverse none;
	-webkit-animation: ringtwoAni 2.0s linear 0s infinite reverse none;
}

.ring.three {
    width: 360px;
    height: 360px;
    margin-left: -180px;
    margin-top: -180px;
    
    animation: ringthreeAni 2.6s linear 0s infinite normal none;
	-webkit-animation: ringthreeAni 2.6s linear 0s infinite normal none;
}

.electron {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 20px;
    top: 50%;
    background-color: rgba(255,34,5,0.8);
    animation: electronscale 0.2s ease-in-out 0s infinite alternate none;
	-webkit-animation: electronscale 0.2s ease-in-out 0s infinite...