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

class Molly extends React.Component {
    handleCallFamilyToEat() {
        console.log("Hey fam! Food's ready!");
    }

    handleCookEggs() {
        console.log("Molly is cooking fluffy eggs...");
    }

    handleMakeRice() {
        console.log("Molly is making some delicious jasmine rice...");
    }

    handleMixChicken() {
        console.log("Molly is mixing chicken with some yummy spicy sauce!");
    }

    render() {
        return (
            <div className="container text-center m-auto mt-20" onClick={this.handleCallFamilyToEat}>
              <div className="flex justify-center space-x-3">
                <button className="bg-indigo-500 hover:bg-indigo-400 font-bold rounded-full py-4 px-8 shadow-lg uppercase text-white focus:outline-none" onClick={this.handleCookEggs}>Cook Eggs</button>
                <button className="bg-pink-500 hover:bg-pink-400 font-bold rounded-full py-4 px-8 shadow-lg uppercase text-white focus:outline-none" onClick={this.handleMakeRice}>Make Rice</button>
                <button className="bg-yellow-500 hover:bg-yellow-400 font-bold rounded-full py-4 px-8 shadow-lg uppercase text-white focus:outline-none" onClick={this.handleMixChicken}>Mix Chicken</button>
              </div>
            </div>
        );
    }

}

ReactDOM.render(<Molly />, document.getElementById("root"));