JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<input name="name" type="text" value="Text input here" />
	<span id="overlay"></span>
</div>

<style>
	#container {
		width: 300px;
		height: 50px;
		position: relative;
	}
	#container input[type="text"] {
		position: relative;
		top: 15px;
		z-index: 1;
		width: 200px;
		display: block;
		margin: 0 auto;
	}
	#container #overlay {
		width: 300px;
		height: 50px;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
		background: rgba(255,0,0, .5);
	}
</style>