JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/main.css">
</head>

<body>
    <div class="container">
        <section class="main">

            <!-- Top Box -->
            <div class="box box--padding">
                <div class="box__content">
                    <p class="box__content-item">Lorem ipsum dolor sit amet.</p>
                    <p class="box__content-item">Lorem ipsum dolor sit amet.</p>
                    <p class="box__content-item">Lorem ipsum dolor sit amet.</p>
                    <p class="box__content-item">Lorem ipsum dolor sit amet.</p>
                    <p class="box__content-item">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>

            <!-- Buttons block -->
            <div class="buttons">
                <button class="btn btn--theme--orange" type="button">edit</button>
                <button class="btn btn--theme--blue" type="button">style</button>
            </div>

            <!-- Bottom Box -->
            <div class="box">

                <!-- Form Edit -->
                <form class="form-edit hidden" name="formEdit">
                    <textarea class="form-edit__textarea"></textarea>
                    <button class="btn btn--theme--red" type="button">add</button>
                    <button class="btn btn--theme--green" type="button">save</button>
                </form>

                <!-- Form Style -->
                <form class="form-style hidden" name="formStyle">

                    <!-- Font Size -->
                    <p class="form-style__title">Font Size:</p>
                    <input class="form-style__radio form-style__radio--margin--first" name="formStyleRadio"
                        type="radio" value="12px">12px
                    <input class="form-style__radio" name="formStyleRadio"...

CSS

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

p {
  padding: 0;
  margin: 0;
}

.container {
  width: 70%;
  margin: 15px auto;
}

.box {
  max-width: 100%;
  min-height: 10.25rem;
  padding: 0.75rem 1.125rem;
  border: 1px solid lightgray;
  border-radius: 3px;
  overflow: hidden;
  background-color: #e6e6e6;
}

.box__content-item {
  margin: 0.75rem 0;
}

.box__content-item:first-child {
  margin-top: 0;
}

.box__content-item:last-child {
  margin-bottom: 0;
}

.box--padding {
  padding: 0;
}

.box__content {
  min-height: 10.25rem;
  padding: 0.75rem 1.125rem;
}

.buttons {
  text-align: center;
  padding: 0.313rem 0;
}

.btn {
  font: inherit;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  border: 1px solid rgba(0, 0, 0, 0.157);
  border-radius: 3px;
  -webkit-transition: background-color .2s linear;
  transition: background-color .2s linear;
}

.btn:focus {
  outline: none;
}

.btn--theme--orange {
  background-color: #ffb11f;
}

.btn--theme--orange:hover {
  background-color: #e69f1d;
}

.btn--theme--orange:focus {
  -webkit-box-shadow: 0px 0px 1px 1px rgba(230, 159, 29, 0.5);
          box-shadow: 0px 0px 1px 1px rgba(230, 159, 29, 0.5);
}

.btn--theme--blue {
  color: #f0f0f0;
  background-color: #1f93ff;
}

.btn--theme--blue:hover {
  background-color: #167ad8;
}

.btn--theme--blue:focus {
  -webkit-box-shadow: 0px 0px 1px 1px rgba(22, 122, 216, 0.5);
          box-shadow: 0px 0px 1px 1px rgba(22, 122, 216, 0.5);
}

.btn--theme--red {
  color: white;
  background-color: #ee1a1a;
}

.btn--theme--red:hover {
  background-color: #d61818;
}

.btn--theme--green {
  color: white;
  background-color: #21b421;
}

.btn--theme--green:hover {
  background-color: #1b9e1b;
}

.form-edit__textarea {
  width: 100%;
  min-height: 7.813rem;
  padding: 0.625rem;
  margin-bottom: 0.313rem;
  border-radius: 3px;
  resize: none;
}

.form-edit__textarea:focus {
  outline: none;
 ...

JavaScript

const CONTAINER = document.querySelector('.container');

const MAIN = document.querySelector('.main');
const CHOOSER = document.querySelector('.chooser');

const CONTENT = document.querySelector('.box__content');
const TEXTAREA = document.querySelector('.form-edit__textarea');
const PICKER = document.querySelector('.color-picker');

const F_EDIT = document.forms.formEdit;
const F_STYLE = document.forms.formStyle;
const F_TABLE = document.forms.formTable;
const F_LIST = document.forms.formList;

TEXTAREA.value = CONTENT.innerHTML;


CONTAINER.addEventListener('click', function (event) {
    console.log(event.target.name);

    // Button [edit]
    if (event.target.innerHTML == 'edit') {
        F_STYLE.classList.add('hidden');

        F_EDIT.classList.toggle('hidden');
    }

    // Button [style]
    if (event.target.innerHTML == 'style') {
        F_EDIT.classList.add('hidden');

        F_STYLE.classList.toggle('hidden');

        // Font Family
        F_STYLE.formStyleSelect.addEventListener('change', (event) => {
            CONTENT.style.fontFamily = event.target.value;
        });
    }

    // Color picker
    else if (event.target.value === 'color') {
        PICKER.classList.toggle('hidden');

        if (event.target.innerHTML == 'Color of Text') {
            PICKER.classList.add('textColor');
            PICKER.classList.remove('bkColor');
        } else if (event.target.innerHTML == 'Background color') {
            PICKER.classList.add('bkColor');
            PICKER.classList.remove('textColor');
        }
    }

    else if (event.target.classList.contains('color-picker__item')) {
        // Set color
        if (PICKER.classList.contains('bkColor')) {
            CONTENT.style.backgroundColor = event.target.style.backgroundColor;
            PICKER.classList.add('hidden');
        }

        // Set backgroung-color
        else {
            CONTENT.style.color = event.target.style.backgroundColor;
            PICKER.classList.add('hidden');
   ...