<header>
  <h1>Style Text Area Demo</h1>
</header>
<form>
  <label for="title">Title:</label>
  <input type="text" id="title" name="title" placeholder="Enter title here" required>

  <label for="content">Content:</label>
  <textarea id="editor" name="content" rows="8" placeholder="Enter content here" required></textarea>

  <input type="submit" value="Save">
</form>
<footer>
  &copy; 2023 My Text Editor Demo
</footer>

/* CSS styles for the body */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  color: #333;
}

/* CSS styles for the header */
header {
  background-color: #33b5e5;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* CSS styles for the form */
form {
  background-color: #fff;
  padding: 35px;
  margin: 20px auto;
  max-width: 950px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

/* CSS styles for the form fields */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

input[type="text"],
textarea {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 20px;
}

input[type="submit"] {
  background-color: #33b5e5;
  color: #fff;
  border: none;
  padding: 20px 20px;
  border-radius: 15px;
  margin-top: 10px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0099cc;
}

/* CSS styles for the footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}

tinymce.init({
  selector: "#editor",

  plugins:
    "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export autosave",

  menubar: false,

  toolbar:
    "undo redo formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify lineheight | removeformat",

  height: "400px",

  //Font Text Area Style
  font_css:
    '@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap");',
  font_family_formats:
    "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Open Sans=open sans,sans-serif; Roboto=roboto,regular,sans-serif;",

  //Color Text Area Style
  color_cols: 6,
  color_map: [
    "#F0F8FF",
    "aliceblue",
    "#FAEBD7",
    "antiquewhite",
    "#F0FFFF",
    "azure",
    "#FFEBCD",
    "blanchedalmond",
    "#DEB887",
    "burlywood",
    "#7FFF00",
    "chartreuse",
    "#DC143C",
    "crimson"
  ],

  //Alignment and Layout for Text Area Style
  block_formats: "Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3; Code=code"
});