JSFiddle - React, Tailwind, and code Playground

by villard

HTML

<div class="form-wrapper">
		<h3>ФОРМА ОБРАТНОЙ СВЯЗИ</h3>
		<div class="contacts-card">
			<p>105082 Москва, Россия,
				<br>2ая Тверская-ямская улица, 2
				<br>Телефон: +7 (985) 761 1609
				<br>e-mail: [email protected]
			</p>
		</div>
		<form action="">
			<div class="email-name">
				<input type="text" class="placeholder" placeholder="E-mail*" class="email">
				<input type="text" class="placeholder" placeholder="Имя и Фамилия" class="name">
			</div>
		</form>
	</div>

CSS

.form-wrapper {
	width: 584px;
}

.form-wrapper h3 {
	font-size: 29px;
	text-transform: uppercase;
}

.form-wrapper .contacts-card {
	min-height: 130px;
	background-color: #bfc3c4;
	color: #010101;
}

.form-wrapper input, .form-wrapper textarea {
	border: 0 none;
	outline: none;
	color: #fff;
}
.email-name {
	height: 47px;
}
.email-name input {
	color: #fff;
	background-color: #dbb352;
	height: 47px;
    
    /*font-weight: bold;
    font-size: 20px;*/
}

.email-name input::-webkit-input-placeholder {
   color: #eedcaf;
}

.email-name input:-moz-placeholder {
   color: black;  
}

.email-name input::-moz-placeholder {
   color: black;  
}

.email-name input:-ms-input-placeholder {  
   color: #eedcaf;  
}

JavaScript

function inputPlaceholder(input,color){if(!input){return null}if(input.placeholder&&"placeholder" in document.createElement(input.tagName)){return input}color=color||"#AAA";var default_color=input.style.color;var placeholder=input.getAttribute("placeholder");if(input.value===""||input.value==placeholder){input.value=placeholder;input.style.color=color;input.setAttribute("data-placeholder-visible","true")}var add_event=
/*@cc_on'attachEvent'||@*/
"addEventListener";input[add_event](
/*@cc_on'on'+@*/
"focus",function(){input.style.color=default_color;if(input.getAttribute("data-placeholder-visible")){input.setAttribute("data-placeholder-visible","");input.value=""}},false);input[add_event](
/*@cc_on'on'+@*/
"blur",function(){if(input.value===""){input.setAttribute("data-placeholder-visible","true");input.value=placeholder;input.style.color=color}else{input.style.color=default_color;input.setAttribute("data-placeholder-visible","")}},false);input.form&&input.form[add_event](
/*@cc_on'on'+@*/
"submit",function(){if(input.getAttribute("data-placeholder-visible")){input.value=""}},false);return input};

var color = "#eedcaf";
var inputPlaceholders = document.querySelectorAll('.placeholder');
for(var i = 0; i < inputPlaceholders.length; i++) {
    inputPlaceholder(inputPlaceholders[i], color);
}