JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

HTML

<div class="field">
	
	<label for="first-name">First name</label>
	<input type="text" maxlength="8" id="first-name">

</div>


<div class="field">
	
	<label for="last-name">Last name</label>
	<input type="text" maxlength="8" id="last-name">
	
</div>

CSS

body {
  padding: 50px;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  color: #444;
}

.field {
  float: left;
  margin: 35px 0 0 35px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

input {
  width: 290px;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-bottom: 1px solid #666;
  font-size: 18px;
  letter-spacing: 24px;
  background: transparent;
  background-size: 35px 35px;
  background-image: -webkit-linear-gradient(0deg, #000 1%, transparent 3%, transparent);
  background-image: -moz-linear-gradient(0deg, #000 1%, transparent 3%, transparent);
}

input:focus {
  outline: 0;
}