JSFiddle - React, Tailwind, and code Playground

HTML

On white, bueno:
<div class="floating-label bg-white">
  <label>Label</label>
  <input type="text" value="Something">
</div>

On non-white, no bueno:
<div class="floating-label bg-gray">
  <label>Label</label>
  <input type="text" value="Something">
</div>

CSS

.floating-label {
  padding: 20px;
  position: relative;
  font-family: Arial, sans-serif;
}

.bg-white {
  background: #fff;
}

.bg-gray {
  background: #eee;
}

input {
  padding: 5px 10px;
  font-size: 14px;
}

label {
  font-size: 11px;
  position: absolute;
  top: 15px;
  left: 25px;
  background: #fff;
  padding: 0 5px;
}