JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div class="box">
    <b class="y"></b>
    <b class="x"></b>
</div>

CSS

.box {
  background-color: #afb;
  
  width: 500px;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 5px #000000;
  border-radius: 5px;
  border: 1px solid #000; 
}
.box .y
{
  display: block;
    width: 50px;
    height: 50px;
    background-image:url("http://pngimg.com/upload/football_PNG1082.png");
    background-size: cover;
    box-shadow:4px 4px 4px #444;
    border-radius: 50%;
    box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

.box .x 
{
   display: block;
    width: 50px;
    height: 50px;
    background-image:url("http://pngimg.com/upload/football_PNG1082.png");
    background-size: cover;
    box-shadow:4px 4px 4px #444;
    border-radius: 50%;
    box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  animation: moveXX 3.05s linear 0s infinite alternate, moveYY 3.4s linear 0s infinite alternate;
    bottom:0;   
}

@keyframes moveX {
  from { left: 0; } to { left: 450px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 250px; }
}


@keyframes moveXX {
  from { left: 450px; } to { left: 0px; }
}
@keyframes moveYY {
  from { top: 250px; } to { top: 0px; }
}

JavaScript

$(
    function()
    {
        
    }
    );