JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div class="ground">
  <div class="flag rect">
    <div class="flag-pattern fr"></div>
    <div class="flag-wave"></div>
  </div>
</div>

CSS

.ground {
  padding-bottom: 20px;
}
.flag {
  position: relative;
  display: inline-block;
  margin: 2em 3em 120px;
  width: 120px;
  height: 120px;
  border: 1px solid #bbb;
  border-left-color: white;
  box-sizing: border-box;
  box-shadow: 2px 5px 14px 0px rgba(0, 0, 0, 0.4);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve3d;
  -webkit-transform-origin: 0 250px;
  -webkit-transform: translate3d(0, 0, 0) rotateZ(5deg) rotateY(-22deg);
  -webkit-animation-name: wave;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  backface-visibility: hidden;
  perspective: 1000;
  transform-style: preserve3d;
  transform-origin: 0 250px;
  transform: translate3d(0, 0, 0) rotateZ(5deg) rotateY(-22deg);
  animation-name: wave;
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(0.16, 0.14, 0.82, 0.73);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.flag:nth-child(odd) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.flag:before {
  position: absolute;
  content: "";
  height: 240px;
  left: -5px;
  top: -3px;
  width: 6px;
  border-right: 1px solid white;
  border-radius: 3px;
  background-color: #444;
  box-shadow: -3px 3px 8px 0px rgba(0, 0, 0, 0.4);
}
.flag.rect {
  width: 168px;
}
.flag-pattern {
  position: absolute;
  background-image: url("https://s3-eu-west-1.amazonaws.com/sdz-upload/prod/upload/color_cs6-01.png");
  background-size: 85%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -webkit-box-reflect: below 60px -webkit-gradient(linear, left top, left bottom, from(transparent), column-rule: ;-stop(70%, transparent), to(rgba(255, 255, 255, 0.05)));
}
.flag-pattern.ch {
  border: 15px solid #c80000;
  background-color: #c80000;
background-image:...