JSFiddle - React, Tailwind, and code Playground

HTML

hello
<div id="root"></div>

Babel + JSX

const FormikApp = withFormik({
  mapPropsToValues({ email, password, newsletter, editor, test }) {
    return {
      email: email || '',
      password: password || '',
      newsletter: newsletter || false,
      editor: editor || 'atom',
      test: test || ''
      }
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Email not valid').required('Email is required'),
    fullname: Yup.string().required('Full Name is required!'),
    password: Yup.string().min(9, 'Password must be 9 characters or longer').required('Password is required')
  }),
  handleSubmit(values, { resetForm, setErrors, setSubmitting }) {
    setTimeout(() => {
      if (values.email === '[email protected]') {
        setErrors({ email: 'That email is already taken' })
      } else {
        resetForm()
      }
      setSubmitting(false)
    }, 2000)
  }
})(App)