JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<div class="wrapper">
  <input id="input">
  <div class="custom-input">
    <span id="content"></span>
    <span>My Suggestions</span>
  </div>
</div>
</body>
</html>

CSS

.wrapper {
  position: relative;
  width: 300px;
}
#input {
  color: transparent;
  padding: 0;
  background: transparent;
}
.custom-input {
  position: absolute;
  top: 0;
  color: grey;
  z-index: -1;
}
#content:after {
  content:"|"
}

JavaScript

const input = document.getElementById("input")
const content = document.getElementById("content")


input.addEventListener("input",(event)=>{
	const value = event.target.value
  content.innerHTML = value
})