JSFiddle - React, Tailwind, and code Playground

by theadam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://rawgit.com/theadam/react-inform/gh-pages/dist/react-inform.js"></script>
<script src="https://npmcdn.com/react-intl@2.1.5/dist/react-intl.min"></script>
<div id="container"></div>
<a href="https://github.com/theadam/react-inform" target="_top"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

CSS

form {
  margin-left:auto;
  margin-right:auto;
  max-width: 500px;
  background: #F7F7F7;
  padding: 0px 25px 25px 20px;
  font: 12px Georgia, "Times New Roman", Times, serif;
  color: #888;
  text-shadow: 1px 1px 1px #FFF;
  border:1px solid #E4E4E4;
}

form h4, form h3 {
  text-align: center;
}

form .message {
  color: #00DD00;
}

form .error {
  color: #DD0000;
}

form input[type="password"], form input[type="text"] {
  width: 100%;
  border: 1px solid #DADADA;
  color: #888;
  height: 30px;
  margin-bottom: 16px;
  margin-top: 2px;
  padding-left: 5px;
  outline: 0 none;
  font-size: 12px;
  line-height:15px;
  box-shadow: inset 0px 1px 4px #ECECEC;
  -moz-box-shadow: inset 0px 1px 4px #ECECEC;
  -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}

input[type="submit"] {
    background: #E27575;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #FFF;
    box-shadow: 1px 1px 5px #B6B6B6;
    border-radius: 3px;
    text-shadow: 1px 1px 1px #9E3F3F;
    cursor: pointer;
}

form span {
  display: block;
  color: #DD0000;
  margin-top: -15px;
  padding-bottom: 15px;
}

Babel + JSX

const { Component } = React;
const { render } = ReactDOM;
const { form } = reactInform;
const { injectIntl, IntlProvider, defineMessages } = ReactIntl;

const fields = ['email', 'password', 'confirmPassword'];

const messages = defineMessages({
    emailRequired: {
      id: 'email.required',
      defaultMessage: 'Email is required!',
    },
    emailInvalid: {
    	id: 'email.invalid',
      defaultMessage: '{value} is not a valid Email Address'
    },
    passwordRequired: {
      id: 'password.required',
    	defaultMessage: 'Password is required!'
    },
    passwordsMustMatch: {
    	id: 'passwordConfirm.match',
      defaultMessage: 'Passwords must match!'
    }
});

const isEmail = (value) => value.match(/[^@]+@[^\.]+\..+/)

const validate = values => {
	const { email, password, confirmPassword } = values;
  const errors = {};
  
  if (!email) errors.email = messages.emailRequired;
  else if (!isEmail(email)) errors.email = messages.emailInvalid;
  
  if (!password) errors.password = messages.passwordRequired;
  
  if (confirmPassword !== password) errors.confirmPassword = messages.passwordsMustMatch;
	
  return errors;
}

@injectIntl
@form({
	fields,
  validate
})
class MyForm extends Component {
	state = {
  	message: undefined,
    error: undefined
  }
  
	handleSubmit(e) {
  	e.preventDefault();
  	const { form } = this.props;
    form.forceValidate();
    
  	if (form.isValid()) {
    	this.setState({message: 'Success!', error: undefined});
      console.log(form.values());
    } else {
    	this.setState({error: 'Please correct the errors.', message: undefined});
    }
  }
  
  format(error, values) {
  	if (error && this.props.intl) {
    	const { formatMessage } = this.props.intl;
    	return formatMessage(error, values);
    }
  }
  
	render() {
  	const { email, password, confirmPassword } = this.props.fields;
		const { formatMessage } = this.props.intl;
    
		return (
    	<form onSubmit={e => this.handleSubmit(e)}>
      	<h3>My Form</h3>
   ...