JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="input-wrap">
  <input type="text" id="card" placeholder="•••• •••• •••• ••••" required>
  <label for="card">Credit/Debit Card Number</label>
</div>

SCSS

.input-wrap {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 250px;
  input {
    opacity: 0;
    box-sizing: border-box;
    padding: 1.25em 1em .75em 1em;
    font-famiy: sans-serif;
    width: 100%;
    transition: .2s;
  }
  input:valid {
    opacity: 1;
  }
  
  label {
    position: absolute;
    font-size: 12px; 
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
    font-family: sans-serif;
    pointer-events: none;
    transition: .2s;
  }
  
  &:hover {
    border: 1px solid #222;
  }
  
  input:focus-within {
    opacity: 1;
  }
  
  input:focus-within + label {
    top: 2px;
    transform: translateY(0);
    font-size: 10px;
  }
  
}

body {
  padding: 2em;
  font-family: sans-serif;
}