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://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="page">
  <div class="header">
    <strong>pokemon.de</strong>
  </div>
  <div class="head-navigation">
    <a href="#">HOME</a> | <a href="#">BLOG</a> | <a href="#">POKEDEX</a> | <span id="login_trigger">Please update your Browser</span>
  </div>
  <div class="content">
    Dear User, welcome to my Website.
    
    <div class="sidebar">
      Awesome Sidebar<br>
      
      <div id="login_form"></div>
    </div>
  </div>
  <div class="footer">
    &copyright; Ash Ketchum 2017
  </div>
</div>


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

SCSS

.page {
  width: 600px;
  font-family: Arial, sans-serif;
}

.page div:not(.header):not(#login_form) {
  border: 1px solid #ccc;
  padding: 10px;
}

.page .header {
  border: 1px solid #ccc;
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.page .content {
  clear: both;
  min-height: 300px;
}

.page .content .sidebar {
  width: 50%;
  float: right;
}

#login_form {
  margin: 10px 0;
  padding: 10px;
}

.component-login {
  width: 85%;
  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;
    font-size: 14px;
  }
}

Babel + JSX

$(document).ready(function() {
  $('#login_trigger').on('click', function() {
    console.log("user clicked on <login_trigger>");
    $('#login_form').show();
  });
});





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">
...