JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
  Bold:<input name="textStyle" type="checkbox" value="bold" />
  <br>
  Italic:<input name="textStyle" type="checkbox" value="italic" />
  <br>
  Underline:<input name="textStyle" type="checkbox" value="underline" />
</form>

<div style="margin-left: 240px; width: 1000px; height: 665px;">
  <p>
    <center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center>
  </p>
  <textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
  <form style="font-family: 'Poppins', sans-serif;">
    <textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
    <input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
  </form>
</div>

CSS

body {
  background-color: #5f5959;
  color: #000000;
}

textarea[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea[type=submit] {
  width: 100%;
  background-color: #f9f9f9;
  color: 000000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

textarea[type=submit]:hover {
  background-color: #908989;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

JavaScript

$('input[name="textStyle"]').change(function() {
  if ($(this).val() == 'bold') {
    if ($(this).is(':checked')) $('textarea[name="styledText"]').css('font-weight', 'bold');
    else $('textarea[name="styledText"]').css('font-weight', 'normal');
  } else if ($(this).val() == 'italic') {
    if ($(this).is(':checked')) $('textarea[name="styledText"]').css('font-style', 'italic');
    else $('textarea[name="styledText"]').css('font-style', 'normal');
  } else if ($(this).val() == 'underline') {
    if ($(this).is(':checked')) $('textarea[name="styledText"]').css('text-decoration', 'underline');
    else $('textarea[name="styledText"]').css('text-decoration', 'none');
  }
});