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

// When we'll use react and build it locally 
// we'll be using the following.
// import {useState} from 'React';
// this is the same as using "React.useState" which we do
// in this example.

// Here's an example
const App = () => {
	const [inputValue, setInputValue] = React.useState("");
    
    const onChangeHandler = (event) => {
      setInputValue(event.target.value);
    }
    return <div>
        <h1>Second Example Event</h1>
        <input
            onChange={onChangeHandler}
            value={inputValue}
            type="text"
            />
        <p>The text is: {inputValue}</p>
    </div>;
}

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