JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="login_panel"></div>

SCSS

.component-login {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 10px;
  
  input {
    width: 95%;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }
  
  h3 {
    margin: 0 0 10px;
  }
  
  .component-error {
    display: inline-block;
    margin: 10px 0;
  }
}

Babel + JSX

const DB = {
	userLogins: [
  	{
    	user: 'yoda',
      pass: '1234'
    },
  ]
};

class Error extends React.Component {
	render() {
  	let errorStyle = {backgroundColor: 'red', padding: '10px', color: '#fff', borderRadius: '10px'};
  
  	return (
    	<span className="component-error" style={errorStyle}>
         <strong>Error:</strong> {this.props.message}
      </span>
    );
  }
};

class Button extends React.Component {
	render() {
  	let buttonStyle = {color: this.props.color || '#000'};
  	return <button style={buttonStyle} onClick={() => this.handleOnClick()}>{this.props.content}</button>;
  }
  
  handleOnClick() {
  	if(!this.props.onClickHandler) {
    	return;
    }
    
		this.props.onClickHandler();
  }
};

class LoginPanel extends React.Component {
	constructor() {
  	super();
    
    this.state = {
    	loggedIn: false,
      error: false,
      account: {}
    };
  }

	isLoggedIn() {
  	return this.state.loggedIn;
  }
  
  hasError() {
  	return this.state.error;
  }

	renderHeadline() {
    if(this.hasError()) {
    	return <Error message="UngĂĽltiger Login!"/>;
    }

		let {user} = this.state.account;
  	return (this.isLoggedIn() ? `Hey, ${user}!` : `Anmelden`);
  }
  
  renderLoginForm() {
  	// TODO add onEnter
  	return (
      <form onKeyPress={(event) => this.handleOnKeyPress(event)}>
        <input type="text" ref="user" placeholder="Ihr Benutzername..." />
        <input type="text" ref="pass" placeholder="Ihr Passwort..." />
      </form>
  	);
  }
  
  renderLoginLogoutButton() {
  	let label = (this.isLoggedIn() ? 'Logout' : 'Login');
  	return <Button content={label} onClickHandler={() => this.onSubmit()}/>;
  }
  
  renderHiddenContent() {
  	return <div>Yoda: Good, the dark side is!</div>;
  }

	render() {
  	return (
    	<div className="component-login">
        <h3>{this.renderHeadline()}</h3>
      	{(!this.isLoggedIn() ? this.renderLoginForm() : this.renderHiddenContent())}
        {this.renderLoginLogoutButton()}
     ...