JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div id="root"></div>

CSS

html {
  font-family: sans-serif;
  font-size: 2em;
}

li {
  font-weight: bold;
  cursor: pointer;
  color: silver;
}

li:hover {
  color: black;
}

li:active {
  color: red;
}

React

function App () {
    function onFruitClick(event) {
        event.preventDefault();
        const fruit = event.target.textContent;
        console.log(`Vous avez cliqué sur ${fruit}`);
    }
 
    return (
        <ul>
            <li onClick={onFruitClick}>Pêche</li>
            <li onClick={onFruitClick}>Banane</li>
            <li onClick={onFruitClick}>Leetchi</li>
        </ul>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));