JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- logo-->
<div class="logo">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
}
.logo {
  width: 200px;
  height: 200px;
  position: relative;
}
.logo > svg,
.logo > div {
  width: 200px;
  height: 200px;
  position: absolute;
}
.logo > svg {
  fill: #fff;
}
.logo > div {
  width: 160px;
  height: 160px;
  margin: 20px;
  border-radius: 14%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  mix-blend-mode: multiply;
  -webkit-animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
          animation: 2s cubic-bezier(0.66, -0.7, 0.27, 1.6) infinite;
}
.logo > div:nth-child(1) {
  background-color: #54ffff;
  -webkit-animation-name: rotate-1;
          animation-name: rotate-1;
}
.logo > div:nth-child(2) {
  background-color: #ff73ff;
  -webkit-animation-name: rotate-2;
          animation-name: rotate-2;
}
.logo > div:nth-child(3) {
  background-color: #339df4;
  -webkit-animation-name: rotate-3;
          animation-name: rotate-3;
}
@-webkit-keyframes rotate-1 {
  to {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
}
@keyframes rotate-1 {
  to {
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
  }
}
@-webkit-keyframes rotate-2 {
  to {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
}
@keyframes rotate-2 {
  to {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
  }
}
@-webkit-keyframes rotate-3 {
  to {
    -webkit-transform: rotate(315deg);
            transform: rotate(315deg);
  }
}
@keyframes rotate-3 {
  to {
    -webkit-transform: rotate(315deg);
           ...