<div class="demo-container">
<div class="demo-content"> 

<form action="" method="POST">
<div class="text-area-container">
<textarea name="textAreaDemo" id="textAreaDemo"></textarea>
</div> 
<div class="message-container">
<div id="message-content"></div> 
</div> 

<div class="submit-button-container">
<input id="submitButton" name="submit" type="submit" value="Submit" class="btn btn-primary float-end">
</div>
</form>
</div>
</div>

.demo-container {
  margin: 0 auto;
  max-width: 600px;
  padding-top: 2rem;
}

.demo-content {
  padding: 1em;
  background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border-radius: 10px;
}

.text-area-container{
  margin-bottom: 10px;
}

.input-error-message {
  background-color: rgba(255, 0, 0, 0.20);
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 6px;
}

.message-after-validation {
  background-color: rgba(0, 255, 0, 0.30);
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 6px;
}

.demo-container-after-submit {
  margin: 1em 0;
  border-radius: 6px;
}

.demo-header-after-submit {
  background-color: rgba(0, 0, 0, 0.15);
  padding: 4px 10px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.content-after-submit {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 10px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.message-container {
  margin-top: 20px;
  height: 30px;
}

.submit-button-container {
  padding: 10px 0 35px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.7.0/tinymce.min.js"></script> 
<script>
tinymce.init({
selector: 'textarea#textAreaDemo',
statusbar: true,
min_height: 200,
plugins: 'autoresize charmap code fullpage help hr image imagetools link lists media nonbreaking pagebreak preview print searchreplace table visualchars wordcount',
toolbar: 'undo redo bold italic bullist numlist charmap | link image media | removeformat fullscreen | code',
});
</script>

<script>
$(document).ready(function(){
$('#submitButton').click(function(){

var tinymceDemoContentValue = tinymce.EditorManager.get('textAreaDemo').getContent();
if ((tinymceDemoContentValue) == '') {
$('#message-content').html('<span class="input-error-message">Please fill out the text area!</span>');
return false;
}

else {
// remove the next line (demo message):
$('#message-content').html('<span class="message-after-validation">Thank You!</span>');

// change false to true
return false; 
}

});

});
</script>