JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<input type="text" id="input-field" />

CSS

#box {
      width: 300px;
      height: 300px;
      background: red;
      -webkit-transform: translate3d(0,0,0);
      -webkit-transition: -webkit-transform cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms;
    }
    #box.move {
      -webkit-transform: translate3d(300px, 0, 0);
    }

JavaScript

$(document).ready(function(){

      $('#input-field').on("focus", function(){
        $('#box').addClass('move');
      });

      $('#input-field').on("blur", function(){
        $('#box').removeClass('move');
      });

    });