JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<div class="login-curves">
<h2>Cloud</h2>
<div>

CSS

.login-curves {
  position: relative;
  align-items: center;
  min-height: 100vh;
  background: transparent linear-gradient(119deg, #0072CE 0%, #002281 100%) 0% 0% no-repeat padding-box;
  overflow: hidden;
  border:1px solid red;
}
.login-curves:before, .login-curves:after {
  content: "";
  position: absolute;
  left: 50%;
  min-width: 250vw;
  min-height: 250vw;
 
  background-color: #fff;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.login-curves:before {
  bottom: 15vh;
  border-radius: 45%;
  animation-duration: 10s;
}
.login-curves:after {
  bottom: 12vh;
  opacity: 0.5; 
   
  border-radius: 45%;
  animation-duration: 50s;
}
@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, -2%) rotateZ(180deg);
    background: white;
  }
  
  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}
h2 {
  position: relative;
  color: #333;
  z-index: 10;
  
  font-size: 8vw;
  text-shadow: 3px 3px 2px #999;
}