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 {
  background-color: darkgrey;
  padding: 1rem;
  border: 3px solid black;
}

React

// props.children will render the child components.
const BackgroundWrapper = (props) => {
	return (<div className="color-theme">
	  {props.children}
	</div>)
}

const DansCat = (props) => {
	let styleObject = {}
	if (!props.color || props.color === "") {
    //pass.
  }else if (props.color === "white") {
  	styleObject.color = "white";
  }else if (props.color === "beige"){
  	styleObject.color = "beige";
  }else {
  	styleObject.color = "darkblue"
  }
  
	return (<p style={styleObject}>
    Hello Mr. {props.name}
  </p>);
}

const App = (props) => {
  return (<BackgroundWrapper>
  	<DansCat name="Ghost" color="beige"/>
    <DansCat name="Gambit" color="beige"/>
    <DansCat name="Marshmallow" color="white"/>
  </BackgroundWrapper>);
}

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