JSFiddle - React, Tailwind, and code Playground

by KCarnaille

HTML

<div class="floating">
  <input id="input" type="text" placeholder=" ">
  <label for="input">Input label</label>
</div>

<div class="floating select">
  <select name="input" id="">
    <option value=""></option>
    <option value="">Toto</option>
    <option value="">Tata</option>
  </select>
  <label for="input">Input label</label>
</div>

CSS

.floating {
  position: relative;
  margin-top:30px;
}

select {
  background-color: transparent;
  width: 100px;
}

.floating input {
  height: 30px;
}

.floating label {
  position: absolute;
  left: 5px;
  pointer-events: none;
}

.floating.select label {
  top: -30px !important;
}

input:placeholder-shown ~ label {
  top: 5px;
}

input + label, .floating:focus ~ label {
  transition: all 200ms;
  top: -20px;
}