JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="head-navigation">
    <a href="#">HOME</a> | <a href="#">BLOG</a> | <a href="#">POKEDEX</a> | <span id="login_trigger"></span>
  </div>

JavaScript

//////////////////////////////////////////////////////////////////////////////
// Task 1
class Anchor extends React.Component {
    render() {
    	return <a id={this.props.id} href={this.props.link}>{this.props.title}</a>;
    };
};

//////////////////////////////////////////////////////////////////////////////
// Task 2
<span id="login_trigger">Please update your Browser</span>

ReactDOM.render(
  <Anchor title="LOGIN" link="#" id="login_trigger"/>,
  document.getElementById('login_trigger')
);

//////////////////////////////////////////////////////////////////////////////
// Task 3 
class Anchor extends React.Component {
    render() {
    	return <a onClick={() => this.handleOnClick()} id={this.props.id} href={this.props.link}>{this.props.title}</a>;
    };
    
    handleOnClick() {
  		this.props.onClickHandler();
		}
};

//////////////////////////////////////////////////////////////////////////////
// Task 4

// ...copy paste...
// display: none;

ReactDOM.render(
  <LoginPanel/>,
  document.getElementById('login_form')
);



//////////////////////////////////////////////////////////////////////////////
// Task 5
let openLoginForm = () => {
	ReactDOM.render(
    <LoginPanel/>,
    document.getElementById('login_form')
  );
};

      <div id="login_form">
       Please update your Browser.
      </div>