JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TO Do</title>
    <link href="style.css" rel="stylesheet">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="script6.js" type="text/babel"></script>
</head>
<body>
<div id="root"></div>

 https://codepen.io/PivovaroffRoman/pen/XWNPEgV // не дает разместить ссылку напрямую тут есть ссылка на работающий онлайн компилятор
</body>
</html>

CSS

body {
    background-color: #e1e388;
}

.field {
    display: flex;
    padding: 10px;
    width: 29%;
    margin-left: 35.5%;
    color: #fff;
    font-size: 1.3em;
    flex-direction: column;
    align-items: center;
}

.box {
    border: 2px solid #aaa719;
    background-color: #d4d37f;
    margin-bottom: 20px;
    padding: 10px;
    width: 80%;
    text-align: center;
}

.box:last-child {
    margin-bottom: 0;
}

button.btn {
    margin-right: 10px;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 0.65em;
    color: #fff;
    outline: none;
}

textarea{
    resize: none;
    background-color: #fafafa;
    border: 1.5px solid silver;
    border-radius: 5px;
    padding: 10px;
    font-size: 0.7em;
    width: 90%;
    outline: none;
}

textarea:focus{
    border: 1.5px solid #6d79cd;
}

.btn.new{
    background-color: #dd567e;
    border: 2px solid #c93964;
    margin-bottom: 10px;
}

.btn.new:hover{
    background-color: #c93964;
    border: 2px solid #ac254d;
}

.btn.success{
    background-color: #4fc966;
    border: 2px solid #2aa24f;
}

.btn.success:hover{
    background-color: #2aa24f;
    border: 2px solid #1e853e;
}

.btn.light {
    background-color: #4eafc9;
    border: 2px solid #2a89a2;
}

.btn.red {
    background-color: #dda66d;
    border: 2px solid #b6821a;
}

.btn.light:hover {
    background-color: #2a89a2;
    border-color: #1d6f85;
}

.btn.red:hover {
    background-color: #b6821a;
    border-color: #946912;
}

JavaScript

class Task extends React.Component{
    constructor(props) {
        super(props);

    }


    handleClickEdit = () => {
       alert(`Pressed edit button of ${this.props.action}`);
    }

    handleClickRemove = function (){
        alert(`Pressed remove button of ${this.props.action}`);
    }

    render() {
        return (
            <div className='box'>
                <div>{this.props.action}</div>
                <button onClick={this.handleClickEdit} className='btn light'>Edit</button>
                <button onClick={this.handleClickRemove} className='btn red'>Remove</button>
            </div>
        );
    }
}

ReactDOM.render(
    <div className='field'>
        <Task action='Task1'/>
        <Task action='Task2'/>
        <Task action='Task3'/>
    </div>
, document.getElementById('root'));