JSFiddle - React, Tailwind, and code Playground

by mrtoxas

HTML

<div class="pseudo-textarea">
  <div class="pseudo-textarea__field" contenteditable="true" tabindex="0"></div>
  <span class="pseudo-textarea__placeholder">Placeholder</span>
</div>

CSS

body {
  padding: 40px;
}

.pseudo-textarea {
  display: inline-block;
  border: 1px solid black;
  position: absolute;
}
.pseudo-textarea__field {
  min-width: 300px;
  height: 100%;
  padding: 5px;
}
.pseudo-textarea__placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  transition: 0.1s linear;
}

.has-text .pseudo-textarea__placeholder,
.pseudo-textarea__field:focus + span {
  color: Red;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  font-size: small;
}

JavaScript

const textArea = document.querySelector(".pseudo-textarea__field");

textArea.addEventListener("focusout", function () {
  if (this.textContent.length > 0) {
    this.parentElement.classList.add("has-text");
  } else {
    this.parentElement.classList.remove("has-text");
  }
});