JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel panel-default input-panel">
				<div class="panel-body input-body">
					<div class="input-caption">Firstname</div>
					<input type="text" class="input-value" id="testinput">
				</div>
			</div>
			
			<div class="panel panel-default input-panel">
				<div class="panel-body input-body">
					<div class="input-caption">Surname</div>
					<input type="text" class="input-value">
				</div>
			</div>
			
			<div class="panel panel-default input-panel">
				<div class="panel-body input-body">
					<div class="input-caption">Email</div>
					<input type="text" class="input-value">
				</div>
			</div>
			
			<br>
			
			<button onclick="document.getElementById('testinput').value = 'hello';">Set .value using JavaScript</button>

CSS

.panel.panel-default.input-panel
{
	position:relative;
	height:45px;
	transition:all 250ms ease;
	margin:0;
	margin-top:10px;
}

.panel-body.input-body
{
	padding:0;
	padding-left:10px;
	padding-right:10px;
	padding-top:18px;
	cursor:text;
}

.input-caption
{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	content:"";
	position:absolute;
	top:11px;
	left:10px;
	padding:0;
	margin:0;
	font-size:16px;
	font-weight:400;
	transition:all 250ms ease;
}

.input-value
{
	padding:0;
	margin:0;
	font-size:16px;
	font-weight:400;
	border-width:0px;
	border:none;
	box-sizing:border-box;
	width: 100%;
	outline:none;
}

JavaScript

class inputPanel
{
	constructor()
	{
		this.targetElement = -1;
	}
	
	selectPanel(targetElement, compareOnly=false)
	{
		if (targetElement.classList.contains("input-body"))
			targetElement = targetElement.parentElement;
		else if (targetElement.classList.contains("input-caption"))
			targetElement = targetElement.parentElement.parentElement;
		else if (targetElement.classList.contains("input-value"))
			targetElement = targetElement.parentElement.parentElement;
		
		if (this.targetElement === targetElement)
			return false;
		
		if (compareOnly)
			return true;
		
		this.targetElement = targetElement;
		this.getElements(targetElement);
		
		if (this.targetElement.style.boxShadow === "")
			this.borderVisible = false;
		else
			this.borderVisible = true;
		
		if (this.captionElement.style.top === "5px")
			this.inputVisible = true;
		else
			this.inputVisible = false;
			
		return true;
	}
	
	getElements(element)
	{
		var children = element.children;
		for (var i = 0; i < children.length; i++)
		{
			var child = children[i];
			if (child.classList.contains("input-body"))
				this.bodyElement = child;
			else if (child.classList.contains("input-caption"))
				this.captionElement = child;
			else if (child.classList.contains("input-value"))
				this.valueElement = child;
			this.getElements(child);
		}
	}
	
	get isBorderVisible()
	{
		return this.borderVisible;
	}
	
	get isInputVisible()
	{
		return this.inputVisible;
	}
	
	get hasValue()
	{
		return !(this.valueElement.value === '');
	}
	
	showBorder()
	{
		if (this.borderVisible === true)
			return;
		
		this.targetElement.style.boxShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19)";
		this.borderVisible = true;
	}
	
	hideBorder()
	{
		if (this.borderVisible === false)
			return;
		
		this.targetElement.style.boxShadow = "";
		this.borderVisible = false;
	}
	
	showInput(focusInput=false)
	{
		if (focusInput)
			$(this.valueElement).focus();
		
		if (this.inputVisible ===...