JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="app"></div>

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
html, body, .container, #app {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #fff;
  margin: 0 !important;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
  background-image: url("https://unsplash.it/1366/768?image=568");
  background-repeat: no-repeat;
  background-size: cover;
}

.form-block-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  -moz-transition: all 0.85s ease-in-out;
  -webkit-transition: all 0.85s ease-in-out;
  transition: all 0.85s ease-in-out;
}
.form-block-wrapper--is-login {
  opacity: .92;
  background-color: #2C497F;
}
.form-block-wrapper--is-signup {
  opacity: .94;
  background-color: #433B7C;
}

.form-block {
  position: relative;
  margin: 100px auto 0;
  width: 285px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 2px;
  color: #fff;
  -webkit-box-shadow: 0px 0px 16px 9px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 0px 16px 9px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 0px 16px 9px rgba(0, 0, 0, 0.07);
}

.form-block__header {
  margin-bottom: 20px;
}
.form-block__header h1 {
  font-size: 30px;
  margin: 0 0 20px;
}

.form-block__toggle-block {
  position: relative;
}
.form-block__toggle-block span {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
}

.form-block__input-wrapper {
  height: 126px;
  position: relative;
  margin-bottom: 2px;
  -moz-transition: all 0.25s cubic-bezier(0.36, 1, 0.62, 0.98) 0.3s;
  -webkit-transition: all 0.25s cubic-bezier(0.36, 1, 0.62, 0.98) 0.3s;
  transition: all 0.25s cubic-bezier(0.36, 1, 0.62, 0.98) 0.3s;
}
.form-block--is-signup .form-block__input-wrapper {
  height: 252px;
  -moz-transition: all 0.5s cubic-bezier(0.36, 1, 0.62, 0.98) 0.2s;
  -webkit-transition: all 0.5s cubic-bezier(0.36, 1, 0.62, 0.98) 0.2s;
  transition: all...

Babel + JSX

const mode = 'login';

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: this.props.mode
        }
    }
    toggleMode() {
        var newMode = this.state.mode === 'login' ? 'signup' : 'login';
        this.setState({ mode: newMode});
    }
    render() {
        return (
            <div>
                <div className={`form-block-wrapper form-block-wrapper--is-${this.state.mode}`} ></div>
                <section className={`form-block form-block--is-${this.state.mode}`}>
                    <header className="form-block__header">
                        <h1>{this.state.mode === 'login' ? 'Welcome back!' : 'Please sign up'}</h1>
                        <div className="form-block__toggle-block">
                            <span>{this.state.mode === 'login' ? 'Don\'t' : 'Already'} have an account? Click here &#8594;</span>
                            <input id="form-toggler" type="checkbox" onClick={this.toggleMode.bind(this)} />
                            <label htmlFor="form-toggler"></label>
                        </div>
                    </header>
                    <LoginForm mode={this.state.mode} onSubmit={this.props.onSubmit} />
                </section>
            </div>
        )
    }
}

class LoginForm extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
        <form onSubmit={this.props.onSubmit}>
            <div className="form-block__input-wrapper">
                <div className="form-group form-group--login">
                    <Input type="text" id="username" label="user name" disabled={this.props.mode === 'signup'}/>
                    <Input type="password" id="password" label="password" disabled={this.props.mode === 'signup'}/>
                </div>
                <div className="form-group form-group--signup">
                    <Input type="text" id="fullname" label="full name"...