JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textbox">
  <label　for="name">
    <input id="name" type="text" placeholder="Name" />
  </label>
</div>

<div class="textbox">
  <label　for="email">
    <input id="email" type="email" placeholder="Email" />
  </label>
</div>

<div class="textbox">
  <label　for="phone">
    <input id="phone" type="tel" placeholder="PhoneNumber" />
  </label>
</div>

SCSS

.textbox {
	position: relative;
	width: 250px;
	margin: 30px auto;
}
input {
	width: 250px;
	padding: 3%;
	border: 1px solid #1b2538;
	border-radius: 4px;
	color: #1b2538;
	font-size: 1.4rem;
	transition: all ease-in-out 0.3s;
	&::-webkit-input-placeholder {
		color: #aaa;
	}
	&::placeholder {
		color: #aaa;
	}
}
input:focus {
	border: 1px solid #00a5a0;
	outline: none;
	box-shadow: 0 0 5px 3px #00a5a0;
}