JSFiddle - React, Tailwind, and code Playground

by Maykhel David

HTML

<!-- 
NOTE:
Seluruh isi Tag SVG hanya untuk Logo DUMET School
-->
  <div class="va">
      
    <svg version="1.1"id="Layer_1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"width="302px"height="66px"viewBox="0 0 302 66"style="enable-background:new 0 0 302 66;"xml:space="preserve"><g><g><g><path...

CSS

html , body { 
    height: 100%;
    width: 100%;
    overflow:hidden;
}


body {
  background: #5fce2e;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#5fce2e), color-stop(100%,#01a302));
  background: -webkit-radial-gradient(center, ellipse cover,  #5fce2e 0%,#01a302 100%);
  background: radial-gradient(ellipse at center,  #5fce2e 0%,#01a302 100%);
}


.va {
    margin: 0 auto 0;
    text-align: center;
    width: 250px;
    margin: 0 auto 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


svg {  
    width: 240px;
    margin: 0 0 5px 0;
}

.loader {
    float: left;                                        
    display: block;                                  
    width: 25px;                           
    height: 25px;                                    
    margin: 0 15px;                                  
    border-radius: 50%;                              
    -webkit-animation-name: animasi;                    
    animation-name: animasi;
    -webkit-animation-duration: 1.5s;                
    animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;     
    animation-iteration-count: infinite;
    -webkit-animation-delay: .5s;                    
    animation-delay: .5s;
}

.loader:nth-child(2) {
    -webkit-animation-delay: .75s;                  
    animation-delay: .75s;                          
}

.loader:nth-child(3) {
    -webkit-animation-delay: 1s;                    
    animation-delay: 1s;
}

.loader:nth-child(4) {
    -webkit-animation-delay: 1.2s;                    
    animation-delay: 1.2s;
}

@-webkit-keyframes animasi {                           
    0% {
        opacity: 0;                                 
        -webkit-transform: scale3d(0, 0, 0);       
        transform: scale3d(0, 0, 0);
    }

    20% {
        opacity: 1;                                 
        -webkit-box-shadow: inset 0px 0px 2px 25px rgba(255,255,255,1);  
    ...