JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.todo-list-item.done {
  text-decoration: line-through;
}

.todo-list-item.important {
  font-weight: bold;
  color: blue;
}

.fa {
  color: green;
}

Babel + JSX

class TodoListItem extends React.Component {
  state = {
    done: false,
    important: false,
  }

  onClick = (e) => {
    const p = e.currentTarget.dataset.toggle;
    this.setState(state => ({
      [p]: !state[p],
    }));
  }

  render() {
    const { label } = this.props;
    const { done, important } = this.state;
    const classNames = [
      'todo-list-item',
      done && 'done',
      important && 'important',
    ].filter(Boolean).join(' ');

    return (
      <div>
        <span
          className={classNames}
          data-toggle="done"
          onClick={this.onClick}
        >{label}</span>
        <button data-toggle="important" onClick={this.onClick}>
          <i className="fa fa-exclamation">click me</i>
        </button>
      </div> 
    )
  }
}

class App extends React.Component {
  state = {
    items: [
      'hello, world!!',
      'fuck the world',
      'fuck everything',
    ].map((n, i) => ({ label: n, id: i + 1 })),
  }

  render() {
    return (
      <div>
        {this.state.items.map(n => <TodoListItem key={n.id} {...n} />)}
      </div>
    );
  }
}

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