JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
	<form action="url">
		<fieldset id="f1">
			<nav>
				<div class="descr"><span>Описание</span></div>
				<div class="ingr"><span>Ингредиенты</span></div>
				<div class="param"><span>Параметры</span></div>
				<div class="goblets"><span>Бокалы</span></div>
			</nav>
			<article>
				<h4>Описание</h4>
				<div class="img">
					<div></div>
					<input type="button" value="Загрузить"/>
				</div>
				<div class="text">
					<input type="text" placeholder="Название коктейля" name="CocktailName"/>
					<input type="text" placeholder="Альтернативное название через запятую" name="AltCocktailName"/>
					<textarea placeholder="Краткое описание" name="Definition"></textarea>
				</div>
				<textarea placeholder="Инструкция для приготовления" name="Recipe"></textarea>
				<div class="button-next">
					<a href="#f2">Ингредиенты</a>
				</div>
			</article>
		</fieldset>
		<fieldset id="f2">
			<nav>
				<div class="descr"><span>Описание</span></div>
				<div class="ingr"><span>Ингредиенты</span></div>
				<div class="param"><span>Параметры</span></div>
				<div class="goblets"><span>Бокалы</span></div>
			</nav>
			<article>
				<h4>Ингредиенты<span title="Украшение?"></span></h4>
				<div class="consist">
				<select title="Название ингредиента" name="IngrName">
					<option selected disabled>Безалкогольные напитки</option>
					<option value="Water">Вода</option>
					<option value="Juice">Сок</option>
					<option value="Milk">Молоко</option>
				</select>
				<input type="number" min="1" name="Quantity"/>
				<select name="Unit">
					<option value="ml">мл</option>
					<option value="g">г</option>
					<option value="kg">кг</option>
				</select>
				<input type="checkbox" name="Garnish"/>
				</div>
				<div class="consist">
				<select title="Название ингредиента" name="IngrName">
					<option selected disabled>Безалкогольные напитки</option>
					<option value="Water">Вода</option>
					<option value="Juice">Сок</option>
					<option...

CSS

body{background: #5D5F5F;}
fieldset{
	font:0.8em Arial,sans-serif;
	width:472px;
	height:422px;
	margin:15% auto 0;
	padding:0;
	border:1px solid #8C969F;
	background: #E9E9E9;
	border-radius:5px;
}
nav{
	height:40px;
	color:#1B467F;
	border-radius:3px;
	background:#4B85CB;
	background:-moz-linear-gradient(bottom,#4983CA,#81BAE8);
	background:-webkit-linear-gradient(bottom,#4983CA,#81BAE8);
	background:-o-linear-gradient(bottom,#4983CA,#81BAE8);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81BAE8',endColorstr='#4983CA',GradientType=0);
	background:linear-gradient(to top,#4983CA,#81BAE8);
	box-shadow:0 4px 4px grey;
	position:relative;
	z-index:1;
}
nav div{
	height:40px;
	width:118px;
	float:left;
	position:relative;
}
nav span{
	display:block;
	height:19px;
	margin:7px auto 0;
}
.descr span{
	background:url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png) no-repeat;
	padding:7px 0 0 28px;
	width:60px;
}
.ingr span{
	background:url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png) no-repeat 0 -26px;
	padding:7px 0 0 18px;
	width:80px;
}
.param span{
	background:url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png) no-repeat 0 -52px;
	padding:7px 0 0 36px;
	width:68px;
}
.goblets span{
	background:url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png) no-repeat 0 -78px;
	padding:7px 0 0 16px;
	width:50px;
}
nav div:after{
	content:"";
	position:absolute;
	width: 14px;
	height: 40px;
	background: url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png) no-repeat 0 -203px;
	top:0;
	right:-7px;
	z-index: 1;
}
.goblets:after{
	content:none;
}
article{
	height:342px;
	background:#E9E9E9;
	background:url(http://s020.radikal.ru/i720/1308/29/83857ffd0cf8.png) no-repeat,url(http://s020.radikal.ru/i718/1308/c8/ae4923a68fa9.png) no-repeat right bottom;
	padding:20px;
	position:relative;
	border-radius: 0 0 5px 5px;
}
article h4{
	margin:0 0 7px 0;
	padding:10px 0 0 28px;
	color:#565656;
	background:url(http://i053.radikal.ru/1308/82/998b0d2cc2ff.png)...