JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

CSS

*{margin:0;padding:0}
.logo-holder{margin:auto;  width:100%; background:red} 
svg{margin:auto; position:relative}
.swoosh {animation: spin 2s 5  linear;animation-delay: 1s;
    -webkit-animation-delay: 1s;}
.co-name {  animation-delay: 3s;
    -webkit-animation-delay: 3s; animation: namefade 3s  linear; opacity:1}
.crown {animation: spin 2s 5  linear;animation-delay: 1s;
    -webkit-animation-delay: 1s;}
 
@keyframes fade {
  0% {opacity: 0} 
  50%{opacity: 1}
  100%{opacity: 0}
}
@keyframes swooshfade {
  0% {opacity: 0}  
  100%{opacity: 1}
}
@keyframes namefade {
  0% {opacity: 0}  
  100%{opacity: 1}
}
@keyframes spin {
  from {transform: rotateY(0deg); transform-origin: 50% 50%}
  to {transform: rotateY(360deg);transform-origin: 50% 50%; opacity: 1 }
}