JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root">

</div>

CSS

#root {
  min-height: 300px;
  padding: 20px 4px;
  margin: 10px 4px;
}

div {
  border: 1px solid #000;
  padding: 12px;
}


label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

#light {
  margin: 10px;
  border-radius: 8px;
}

#sofa {
  margin: 0px 40px;
  padding: 20px;
}

Babel + JSX

function Light({ on }) {
  console.log("Light render")

  return (
    <div id="light">
      { on ? 'LIGHTS ON' : 'LIGHTS OFF' } @ { new Date().toISOString() }
    </div>
  );
}

function Occupant({ name }) {
  console.log("Occupant render")
  
  return (
    <div id="occupant">
      Occupied by: { name } @ { new Date().toISOString() }
    </div>
  );  
}

function Sofa({ name }) {
  console.log("Sofa render")

  return (
    <div id="sofa">
      <label>Sofa { new Date().toISOString() }</label>
      <Occupant name={name}/>
    </div>
  );
}

function Carpet({ player }) {
  console.log("Carpet render")

  return (
    <div id="carpet">
      <label>Carpet</label>
      <Sofa name={player} />
    </div>
  );
}

function Room() {
  const [lightSwitchOn, setLightSwitchOn] = React.useState(false)
  const [occupant, setOccupant] = React.useState("Jeff")  
  
  const musicalChairs = () => {
    const players = ["Adam", "Jeff", "Steve", "Marie", "Ling", "Krish"]
    const index = Math.floor(Math.random(0) * 5)
    setOccupant(players[index])
  }

  console.log("Room render")

  return (
    <div id="room">
      <label>Room</label>
      <button onClick={() => setLightSwitchOn(!lightSwitchOn)}>SWITCH</button>
      <button onClick={() => musicalChairs()}>MUSIC!</button>
      <Light on={lightSwitchOn}/>
      <Carpet player={occupant}/>
    </div>
  );
}

const rootNode = document.getElementById('root');
ReactDOM.createRoot(rootNode).render(<Room />);