JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<body>
<div id="preloader">
    <div id="preloader2"></div>
</div>
<div><h1 id="hey">
  Work hard.<br>
  Do good.<br>
  Be incredible!
<h1>
</div>
</body>

CSS

body{
    background-color: black;
    display:flex;
    justify-content:center;
    margin-top:50px;
}
#preloader{
    height:100px;
    width:100px;
    border:10px solid #2AF2F1;
    border-radius:50%;
    animation: preloader 1s linear infinite;
    border-top-color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:transperent;
}
#preloader2{
    height:50px;
    width:50px;
    border:5px solid #2AF2F1;
    background-color:transperent;
    border-radius:50%;
    border-top-color:white;
}
@keyframes preloader{
    0%{
        transform: rotate(0deg);
    }
    20%{
        box-shadow: 0px 0px 15px 5px #12F3CE;
        transform: rotate(360deg);
    }
    30%{
        box-shadow: 0px 0px 15px 3px #12F3CE;
        transform: rotate(360deg);
    }
    40%{
        box-shadow: 0px 0px 10px 2px #12F3CE;
        transform: rotate(360deg);
    }
}
#hey{
    margin-left:50px;
    color:#F012DA;
}