JSFiddle - React, Tailwind, and code Playground

by Mateusz Zatorski

HTML

<script src="https://npmcdn.com/react/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="https://npmcdn.com/history@3.0.0-0/umd/History.min.js"></script>
<div id="root"></div>

Babel + JSX

const { render } = ReactDOM;
const { Component, PropTypes } = React;
const { createHashHistory } = History;
const { Router, Route, IndexRoute, Link, useRouterHistory } = ReactRouter;

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
  
/* 
 * Playground area: feel free to change the code below 
 * like you would 	normally do, for your app.
 * If you change the components, make sure to refactor
 * the routes appropriately
 */  

const App = ({ children }) =>
	<div>
		<NavBar />
    { children }
  </div>
  
const NavBar = () =>
	<ul>
		<li><Link to="/">Home</Link></li>
		<li><Link to="/about">About</Link></li>
		<li><Link to="/contact">Contact</Link></li>
  </ul>
  
const Home = () =>
	<div>
  	<h3>Home</h3>
    <p>
    	This is React Router demo. 
      Play around here, see how the UI changes based on the URL. 
      You can use the URL bar to enter the address. 
      Hit 'enter' to navigate to the given address.
    </p>
    <p>
    	Feel free to collaborate on this JSFiddle to make it better. It is not perfect now.
    </p>
  </div>
  
const About = () =>
	<div>
  	<h3>About</h3>
  </div>
  
const Contact = () =>
	<div>
  	<h3>Contact</h3>
		<ul>
    	<li>Mateusz Zatorski</li>
    	<li>Github: <a href="https://github.com/knowbody">knowbody</a></li>
    </ul>
  </div>

/* End of playground area */
  

const Root = () =>
	<Router history={appHistory}>
  	<Route component={Browser}>
    
    {/* Add your routes below */}
    
    	<Route path="/" component={App}>
      	<IndexRoute component={Home} />
    		<Route path="about" component={About} />
    		<Route path="contact" component={Contact} />
      </Route>
      
    {/* ===================== */}
    
    </Route>
  </Router>








/* 
 * Below there are two fixed components (FakeUrlBar and Browser), 
 * they are responsible for imitating the browser.
 */

class FakeUrlBar extends Component {
	constructor(props, context) {
  	super(props, context);
    this.state = { 
      url:...