JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div class="wrapper">
        <div class="content">
            <div class="big-bits-wrapper">
                <div class="big-bits-icon">
                    <span class="bit bit1 animated"></span>
                    <span class="bit bit2 animated"></span>
                    <span class="bit bit3 animated"></span>
                    <span class="bit bit4 animated"></span>

                    <div class="bit-neutron">
                        <span class="bit bit-normal bit5 animated"></span>
                        <span class="bit bit-normal bit6 animated"></span>
                        <span class="bit bit-normal bit7 animated"></span>
                        <span class="bit bit-normal bit8 animated"></span>
                        <span class="bit bit-normal bit9 animated"></span>
                        <span class="bit bit-normal bit10 animated"></span>
                        <span class="bit bit-normal bit11 animated"></span>
                        <span class="bit bit-normal bit12 animated"></span>
                        <span class="bit bit-normal bit13 animated"></span>
                        <span class="bit bit-normal bit14 animated"></span>
                        <span class="bit bit-normal bit15 animated"></span>
                        <span class="bit bit-normal bit16 animated"></span>
                        <span class="bit bit-normal bit17 animated"></span>
                        <span class="bit bit-normal bit18 animated"></span>
                        <span class="bit bit-normal bit19 animated"></span>
                        <span class="bit bit-normal bit20 animated"></span>

                        <span class="bit bit-medium bit21 animated"></span>
                        <span class="bit bit-medium bit22 animated"></span>
                        <span class="bit bit-medium bit23 animated"></span>
                        <span class="bit bit-medium bit24 animated"></span>
                        <span class="bit bit-medium...

CSS

body {
    background-color: #02a2bb;
}

.content {
    text-align: center;
    padding: 50px;
}

.big-bits-wrapper {
    display: inline-block;
}

.big-bits-icon {
    display: inline-block;
    width: 110px;
    height: 110px;
    position: relative;
}

.bit {
    position: absolute;
    background-color: #fff;
    display: inline-block;
    border-radius: 50%;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -ms-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}

.bit-neutron {
    width: 75px;
    height: 75px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -55%);
    -moz-transform: translate(-50%, -55%);
    -ms-transform: translate(-50%, -55%);
    -o-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
    border-radius: 50%;
}

.bit-normal {
    width: 10px;
    height: 10px;
}

.bit-medium {
    width: 7px;
    height: 7px;
}

.bit-small {
    width: 5px;
    height: 5px;
}

.bit-mini {
    width: 3px;
    height: 3px;
}

.bit-tiny {
    width: 2px;
    height: 2px;
}

.bit1 {
    width: 8px;
    height: 8px;
    top: 5px;
    left: 5px;
    -webkit-animation-delay: .5s;
    -moz-animation-delay: .5s;
    -ms-animation-delay: .5s;
    -o-animation-delay: .5s;
    animation-delay: .5s;
}

.bit2 {
    width: 11px;
    height: 11px;
    top: 0;
    right: 15px;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -ms-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s;
}

.bit3 {
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    -webkit-animation-delay: .45s;
    -moz-animation-delay: .45s;
    -ms-animation-delay: .45s;
    -o-animation-delay: .45s;
    animation-delay: .45s;
}

.bit4 {
    width: 15px;
    height: 15px;
    bottom: 15px;
    left: 0;
    -webkit-animation-delay: .55s;
    -moz-animation-delay: .55s;
    -ms-animation-delay: .55s;
 ...