JSFiddle - React, Tailwind, and code Playground

by dgmouris

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div {
      margin-top: 50px;
    }
    p {
      font-family: "Arial";
      font-size: 20px;
      
    }
    button {
      padding: 10px;
      font-size: 20px;
      background-color: darkgrey;
    }
  </style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="react-container">
  </div>

  <!-- 
    Take look below to learn more about events
    https://reactjs.org/docs/events.html
  -->
  
  <!-- React -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  </body>
</html>
</body>
</html>

React

// 

const App = () => {
  const [on, setOn] = React.useState(false);
  
  const toggleMessage = (event) => {
    setOn(!on);
  }
  
  return (<div>
      <button
         onClick={toggleMessage}>
          Toggle
      </button>
      { on ? 
      	<p>The boolean value of on is "true"</p>
        :
      	<p>The boolean value of on is "false"</p>
      }
    </div>);
}



const domContainer = document.querySelector("#react-container");
ReactDOM.render(<App/>, domContainer);