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;} 
                }