JSFiddle - React, Tailwind, and code Playground

by dgmouris

HTML

<!doctype html>
<html class="no-js" lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>React Demo App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

</head>

<body>

  <div id="react-container"></div>

  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</body>
</html>

CSS

.color-theme {
  
}

React

const DansCat = (props) => {
	return (<p>
  	Hello Mr. {props.name}
  </p>);
}

const App = (props) => {
  return (<div>
  	<DansCat name="Ghost"/>
    <DansCat name="Gambit"/>
    <DansCat name="Marshmallow"/>
  </div>);
}

const domContainer = document.querySelector('#react-container');
// Use straight JSX to work with existing components
ReactDOM.render(<App/>, domContainer);