JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
	<header class="main-header">
		<div class="container clearfix">
			<div class="logo">
				<img src="" width="100px" height="40px" alt="Логотип">
			</div>
			<nav class="main-navigation">
				<ul>
					<li class="activ">
						<a href="#">Студия</a>
					</li>
					<li>
						<a href="#">Клиенты</a>
					</li>
					<li>
						<a href="#">Магазин</a>
					</li>
					<li>
						<a href="#">Контакты</a>
					</li>
				</ul>
			</nav>
			<a href="#" class="basket">Корзина</a>
		</div>
	</header>
	<main class="container">
		<div class="container clearfix">
			<div class="slider">
				<figure class="slider">
					<div>
						Долго, дорого, скурпулёзно
					</div>
					<p>
						Математически выверенный дизайн <br>
						для вашего сайта или мобильного приложения.
					</p>
					<a href="#">Узнать больше</a>
					<img src="" width="900px" height="100px" alt="Слайдер">
				</figure>
				<div class="features clearfix">
					<div class="features-item red">
						<img src="">
						<div class="features-title">Веб-сайты</div>
						<p>
							Мир никогда не буджет прежним<br>
							после того как увидит ваш сайт!
						</p>
						<a href="#">Заказать</a>
					</div>
					<div class="features-item green">
						<img src="">
						<div class="features-title">Приложения</div>
						<p>
							Покороите топ-10 приложений<br>
							в AppStore и Google Play.
						</p>
						<a href="#">Заказать</a>
					</div>
					<div class="features-item yellow">
						<img src="">
						<div class="features-title">Призетнации</div>
						<p>
							Вы также не подозреваете,<br>
							насколько вы изумительны.
						</p>
						<a href="#">Заказать</a>
					</div>
				</div>
			</div>
			<div class="index-content clearfix">
				<div class="content-column-left">
					<h2 class="column-left-title">
						Мы - маленькая, но годрая<br>
						дизайн-студия из Краснодара.
					</h2>
					<p>
						Исповедуем принципи минимализма и чистоты. Ставим...