JSFiddle - React, Tailwind, and code Playground

CSS

.error-enter
  transform: translateX(-110%)


.error-enter.error-enter-active
  transform: translateX(110%)
  transition: transform 500ms ease-in-out


.error-leave
  transform: translateX(0)


.error-leave.error-leave-active
  transform: translateX(110%)
  transition: transform 500ms ease-in-out

JavaScript

const nameInput = ({input, label, placeholder, type, className, meta: {touched, error}}) =>
    <div>
        <input type="text"
               {...input}
               className={className}
               placeholder={placeholder}/>
        {touched && error &&
        <ReactCSSTransitionGroup
            transitionName="error"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}>
            <div className="buy-field__error">{error}</div>
        </ReactCSSTransitionGroup> }

    </div>;