JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-clear col-lg-5 footer__form">
					<a href="#"><img src="img/logotype_footer.svg" alt=""></a>
					<div class="form__wrapper">
						<p>Свяжитесь с нами</p>
						<form action="">
							<div class="promoted__checkbox">
								<input type="checkbox" id="agree" name="agree" value="Принимаю">
								<label for="agree">
									<svg><use xlink:href="#checkmark"></svg>
								</label>
								<span>Я согласен с правилами передачи и обработки персональных данных</span>
							</div>
							<div class="form__label">
								<label for="name">ФИО</label>
								<input type="text" id="name" name="name" required>
							</div>
							<div class="form__label">
								<label for="phone">Телефон</label>
								<input type="text" id="phone" name="phone" required>
							</div>
							<div class="form__label">
								<label for="message">ФИО</label>
								<textarea type="text" id="message" name="message" rows="1"></textarea>
							</div>
							<button>Отправить</button>
						</form>
					</div>
				</div>
				<div class="col-clear col-lg-7 footer__sitemap">
					<div class="sitemap__outer">
						<div class="sitemap__inner">
							<div class="sitemap__main">
								<a href="#">Каталог</a>
								<a href="#">Акция</a>
								<a href="#">Оплата</a>
								<a href="#">Доставка</a>
								<a href="#">Контакты</a>
							</div>
							<div class="sitemap__category">
								<div class="col-lg-4 col-clear-left">
									<a href="#">Ванны и...

CSS

/*
 *  Footer
*/

footer{
	position: relative;
	background: #00617E;
	padding-bottom: 45px;
	z-index: 6;
}

.footer__form > a > img{
	width: 155px;
	padding: 24px 0 22px 0;
}

.footer__form .form__wrapper{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 27px 64px;
	border: 3px #FF6900 solid;
	z-index: 2;
}

.footer__form .form__wrapper > p{
	font-family: Proxima Nova;
	font-size: 24px;
	font-weight: bold;
	line-height: normal;
	text-transform: uppercase;
	color: white;
	padding-bottom: 20px;
}

/*
 *  Footer --> Form
*/

.footer__form .form__wrapper > form{
	font-family: Proxima Nova;
	font-size: 14px;
	color: white;
	display: flex;
	flex-direction: column;

}

.footer__form .form__wrapper > form > .form__label{
	padding-bottom: 28px;
}

.footer__form .form__wrapper > form > .promoted__checkbox{
	margin-bottom: 20px;
}

.footer__form .form__wrapper > form > .form__label > label{
	position: absolute;
	cursor: text;
}

.footer__form .form__wrapper > form > .form__label > input,
.footer__form .form__wrapper > form > .form__label > textarea{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px white solid;
	resize: none;
	font-family: Proxima Nova;
	font-size: 14px;
	color: white;
	caret-color: white;
}

.footer__form .form__wrapper > form > .form__label > textarea{
	height: 20px;
}

.footer__form .form__wrapper > form > button{
	font-family: Proxima Nova;
	font-size: 16px;
	font-weight: bold;
	line-height: normal;
	color: white;
	background: #FF6900;
	border: 0;
	cursor: pointer;
	padding: 13px 41px;
	margin: 0 auto;
}

/*
 *  Footer --> Menu
*/

.footer__sitemap > .sitemap__outer{
	position: relative;
	top: -40px;
	z-index: 1;
}

.footer__sitemap > .sitemap__outer > .sitemap__inner{
	width: 100%;
	position: absolute;
	background: white;
	padding: 20px 20px 40px 40px;
	left: -25px;
}

.footer__sitemap > .sitemap__outer > .sitemap__inner > .sitemap__main{
	display:...