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: relative;
  top: -16px;
  left: 46px;
  padding: 0 5px;
  z-index: 1;
}
label:before {
  z-index: -1;
  content: '';
  display: block;
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -1px;
}