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@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
</body>
</html>

CSS

.color-theme {
  background-color: darkgrey;
  padding: 1rem;
  border: 3px solid black;
}

React

const goodFoods = [
  "Sushi",
  "Chicken Tikka Masala",
  "Vietnamese Subs",
  "Ramen"
]

function App() {
  return <div>
    <h1>Our Application</h1>
    <ul>
      {goodFoods.map((food, index) => {
       return <li key={index}>{food}</li>
      })}
    </ul>;
  </div>
}


const domContainer = document.querySelector('#react-container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />)