JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div id="sea">
            <img src="ship.png" alt="ship" width="128" height="128"/>
        </div>
    </div>

CSS

#wrapper{position:relative;top:50px;width:700px;height:320px;
            margin:0 auto;background:white;border-radius:10px;}
            #sea{position:relative;background:#2875DE;width:700px;height:170px;border-radius:10px;top:190px;}
            #sea img{
              position:absolute;
              left:480px;top:-20px;
              animation:myship 10s;
              -moz-animation:myship 10s; /* Firefox */
              -webkit-animation:myship 10s; /* Safari and Chrome */
            }
               @keyframes myship
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-moz-keyframes myship
                {
                from {left: 480px;} 
                to{left:20px;} 
                }
                @-webkit-keyframes myship
                {
                from {left: 480px;} 
                to{left:20px;} 
                }