JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="hero">
	<div class="hero-links">
		<div class="hero-link dropdown" data-img="https://unsplash.it/1920/1080?image=0" id="standard">Standard</div>
		<div class="hero-link dropdown" data-img="https://unsplash.it/1920/1080?image=1">Premium 1</div>
		<div class="hero-link dropdown" data-img="https://unsplash.it/1920/1080?image=2">Premium 2</div>	
	</div>
</div>

CSS

body,
html {
	height: 100%;
}

body {
	font-family: sans-serif;
}

.hero {
	height: 100%;
	background: url('https://unsplash.it/1920/1080?image=6');
	background-size: cover !important;
	background-position: center center;
}

.hero-links {
	display: flex;
	background: #fff;
	border-bottom: 1px solid #e8e8e8;
}

.hero-link {
	padding: 1.5rem 2rem;
	text-align: center;
	flex: 1;
}

.hero-link.active {
	background: salmon;
}

.hero-link:hover {
	background: #e8e8e8;
	cursor: pointer;
}

.hero-link:not(:last-of-type) {
	border-right: 1px solid #e8e8e8;
}

JavaScript

const hero = document.querySelector('.hero');
const buttons = document.querySelectorAll('.hero-link')
const dropDown = document.querySelectorAll('.dropdown')

buttons.forEach(button => button.addEventListener('click', updateBg));

function updateBg(e) {
	buttons.forEach(button => button.classList.remove('active'))
	e.target.classList.add('active')	
	hero.style.background = `url(${e.target.dataset.img})`
}

function toggleDropDowns(e) {
	console.log('dropdown', e)
}

dropDown.forEach(dropdown => dropdown.addEventListener('click', toggleDropDowns))