<div class="flex justify-center h-full">
      <div class="f-container flex flex-col justify-center">
        <div class="bg-white p-5 my-5 rounded">
         <div id="app"></div>
        </div>
      </div>
    </div>

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  display: block;
  height: 100vh;
  background-image: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}
.f-container {
 width: 320px;
}
.field {
  label {
    left: 0.75rem;
    top: 0.75rem;
    transition: all .4s ease;
    padding: 0 .2rem;
  }
 
 input::placeholder {
  color: transparent;
  transition: color .4s ease;
 }
 
 input:focus::placeholder {
  color: #cbd5e0;
 }
}

const { useState } = React;

const App = () => {
  return (
    <div>
    <h2>Sign Up</h2>
    <StdInput 
      name="user[email]"
      label="Email"
      type="email"
      placeholder="[email protected]"
      value=""
    />
    <StdInput 
      name="user[password]"
      label="Password"
      type="password"
      placeholder="[email protected]#$234"
      value=""
    />
    <StdInput 
      name="user[password_confirmation]"
      label="Password Confirmation"
      type="password"
      placeholder="[email protected]#$234"
      value=""
    />
    <button className="w-full bg-blue-700 p-2 rounded text-white hover:bg-blue-600 cursor-pointer">Sign up</button>
    </div>
  )
}

const StdInput = (props) => {
  let blurStyles = { label: {}, input: {} }
  let focusStyles = {
    label: { top: "-11px", color: "#4299e1", fontSize: "14px", background: "#fff" },
    input: { borderColor: "#4299e1" }
  }

  const [styles, setStyles] = useState(blurStyles);
  const [value, setValue] = useState(props.value || "");

  const onFocus = () => {
    setStyles(focusStyles)
  }

  const onBlur = () => {
    if (value.length  === 0) {
      setStyles(blurStyles)
    }
  }

  return <>
    <div className="field relative block w-full my-4">
      <label htmlFor={props.name} style={styles.label} className="absolute text-gray-500">{props.label}</label>
      <input id={props.name}
        style={styles.input}
        type={props.type}
        name={props.name}
        placeholder={props.placeholder}
        className="appearance-none block w-full text-gray-700 border border-gray-500 rounded py-3 px-5 mb-3 leading-tight focus:outline-none focus:bg-white"
        onFocus={()=> { onFocus() }}
        onBlur={()=> { onBlur() }}
        onChange={e => setValue(e.target.value)}
        value={value}
        />
    </div>
  </>
}



ReactDOM.render(<App />, document.getElementById('app'))