JSFiddle - React, Tailwind, and code Playground

by Nooshu

HTML

<body>
  <ul>
    <li>List 1</li>
    <li>List 2</li>
  </ul>
</body>

CSS

body {
  background: #004c70;
}

@media (min-width: 480px) {
  @-webkit-keyframes cloud-animation-1 {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(300px);
              transform: translateX(300px);
    }
  }
  @keyframes cloud-animation-1 {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(300px);
              transform: translateX(300px);
    }
  }
}
@-webkit-keyframes cloud-animation-2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(370px);
            transform: translateX(370px);
  }
}
@keyframes cloud-animation-2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(370px);
            transform: translateX(370px);
  }
}
li {
  position: absolute;
  text-indent: -999em;
  padding: 0;
  margin: 0;
  background: url("http://images.nooshu.com/images/cloud-r.svg") no-repeat;
  width: 100px;
  height: 50px;
  background-size: 100px 50px;
  opacity: 0.5;
  list-style: none;
}
li:nth-of-type(1) {
  left: 50px;
  top: 40px;
  -webkit-animation: cloud-animation-1 20s infinite linear;
          animation: cloud-animation-1 20s infinite linear;
}
li:nth-of-type(2) {
  left: 100px;
  top: 200px;
  -webkit-animation: cloud-animation-2 40s infinite linear;
          animation: cloud-animation-2 40s infinite linear;
}-