JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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