JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!-- Atom -->
<div class="atom">
    <!-- orbital 1 -->
    <div class="orbital">
        <!-- contendor del electron-->
        <div class="ruta">
            <!-- electron -->
            <div class="electron"></div>
        </div>
    </div>
    <!-- orbital 2 -->
    <div class="orbital e2">
        <div class="ruta">
            <div class="electron"></div>
        </div>
    </div>
    <!-- orbital 3 -->
    <div class="orbital e3">
        <div class="ruta">
            <div class="electron"></div>
        </div>
    </div>
    <!-- Protones -->
    <div class="proton p1"></div>
    <div class="proton p2"></div>
    <!-- neutornes -->
    <div class="neutron n1"></div>
    <div class="neutron n2"></div>
</div>

<!-- 2 Atom -->
<div class="atom dark">
    <div class="orbital">
        <div class="ruta uno">
            <div class="electron"></div>
        </div>
    </div>
    <div class="orbital e2">
        <div class="ruta uno">
            <div class="electron"></div>
        </div>
    </div>
    <div class="orbital e3">
        <div class="ruta uno">
            <div class="electron"></div>
        </div>
    </div>
    <div class="proton p1"></div>
    <div class="proton p2"></div>
    <div class="neutron n1"></div>
    <div class="neutron n2"></div>
</div>

CSS

.atom {
    position:relative;
    height: 150px;
}
.orbital {
    -moz-transform: rotate(-55deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(-55deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    position:absolute;
    width: 70px;
    height:70px;
    top:50%;
    left:50%;
    margin-top: -35px;
    margin-left:-35px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #999;
}
.orbital.e3 {
    -moz-transform: rotate(70deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(70deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}
.orbital.e2 {
    -moz-transform: rotate(240deg) scale(1, 1) skewX(12deg) skewY(40deg) translate(0, 0);
    -webkit-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -o-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    -ms-transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
    transform: rotate(0deg) scale(1, 1) skew(12deg, 40deg) translate(0, 0);
}
.ruta {
    width: 70px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -5px;
}
.electron {
    background-color: #00C4C9;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width:9px;
    height:9px;
    margin-left:-6px;
}
.proton, .neutron {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position:absolute;
   ...