JSFiddle - React, Tailwind, and code Playground

by christopheviau

HTML

<div class="input-container">
  <input class="form-control" placeholder="Untitled Dashboard" />
</div>

CSS

.input-container:hover::before {
  content: "✎";
  color: skyblue;
  font-size: 24px;
  position: absolute;
  top: 16px;
  left: 16px;
}

input {
  width: 100%;
  padding: 1em !important;
  margin: 0em !important;
  box-sizing: border-box;
  text-align: center;
}

input:hover {
  border: 2px solid skyblue;
	padding-bottom: 1em;
}

.input-container {
	padding-bottom: 1em;
}