JSFiddle - React, Tailwind, and code Playground

by Xenel

HTML

<div class="slider">
    <nav class="navbar global-padding">
    <a href="#" class="navbar__logo-link"><img src="{% static 'img/logo.svg' %}" alt="Interior logo" class="navbar__logo-img"></a>
    <ul class="navbar__menu">
        <li class="navbar__menu-item"><a href="#" class="navbar__menu-link navbar__menu-link_active">HOME</a></li>
        <li class="navbar__menu-item"><a href="#" class="navbar__menu-link">PRODUCTS</a></li>
        <li class="navbar__menu-item"><a href="#" class="navbar__menu-link">HISTORY</a></li>
        <li class="navbar__menu-item"><a href="#" class="navbar__menu-link">SHOWROOM</a></li>
        <li class="navbar__menu-item"><a href="#" class="navbar__menu-link">CONTACT</a></li>
        <button class="navbar__search"><img class="navbar__search-icon" src="{% static 'img/search.svg' %}" alt="Search"></button>
    </ul>
</nav>
    <div class="slider__slide global-padding" style="background-image: url({% static 'index/img/slider/slider-img.jpg' %});">
    </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.navbar {
	display: flex;

	padding-top: 63px;

	flex-wrap: wrap;
	justify-content: space-between;
}

.navbar__menu {
	display: flex;

	list-style: none;
}

.navbar__menu-link {
	padding: 10px 13px;

	text-decoration: none;
	text-transform: uppercase;

	color: #8c8c8c;

	font-size: 14px;
	font-weight: 300;
}

.slider {
	width: 100vw;
	height: 100vh;
}

.slider__slide {
	width: 100vw;
	height: 100vh;
  background-color: grey;
}