JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form">
<form>
<input type="text" class="form-name" placeholder="Ваше имя">
<input type="tel" class="form-tel" placeholder="Ваш телефон">
<input type="url" class="form-url" placeholder="Адрес сайта">
<input type="submit" class="form-submit" value="жми">
</form>
<span><img src="https://cdn1.iconfinder.com/data/icons/significon/512/Significon-Like-20.png" alt="" /></span>
</div>
CSS
/*** Форма ***/
.form {
position: relative;
top: -44px;
margin: 0 auto;
width: 940px;
padding: 25px;
background: #272726;
border: 3px solid #27ae60;
border-radius: 3px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"] {
color: #adb1af;
outline: none;
font-family: 'PT Sans Bold', Arial, sans-serif;
}
.form-name, .form-tel, .form-url {
padding: 2px 5px;
width: 266px;
border: 3px solid #27ae60;
border-radius: 3px;
font-size: 1.8em;
}
input[type="submit"] {
outline: none;
color: #f0f7f3;
}
.form-submit {
padding: 2px 10px;
background: #27ae60;
border: 3px solid #27ae60;
border-radius: 3px;
font-size: 1.8em;
}
.form span {
display: none;
}
JavaScript
<script>
document.forms[0].addEventListener('submit', function(e) {
document.getElementsByTagName('span')[0].style.display = 'inline-block';
e.preventDefault();
});
</script>