JSFiddle - React, Tailwind, and code Playground

HTML

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

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

SCSS

body{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: -78px;
}
.textbox {
	position: relative;
	width: 250px;
	margin: 30px 0 0 5px;
	padding: 0 0 0 73px;
}
input {
	box-sizing: border-box;
	width: 250px;
	padding: 10px 0 10px 15px;
	border-radius: 3px;
	border: 1px solid #00a5a0;
	background: #fff;
	outline: 0;
	transition: all ease-in-out 0.3s;
	&::-webkit-input-placeholder {
		color: #fff;
	}
	+ label {
		position: absolute;
		top: 0;
		left: 73px;
		padding: 6.5px 15px;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		background: #00a5a0;
		color: #fff;
		transition: all ease-in-out 0.3s;
	}
	&:focus {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		background: #fff;
		&::-webkit-input-placeholder {
			color: #aaa;
		}
		+ label {
			left: 1px;
		}
	}
}