Hero with same style on all devices

<div>
	<img src="https://source.unsplash.com/1920x720?nature" alt="Nature">
	<div class="text-center p-6 lg:py-16 lg:px-24 border border-gray-200">
		<div class="w-full">
			<h1 class="text-lg-2 mb-2 md:text-lg-3 lg:text-lg-5 lg:font-sans-light">Make a compelling statement</h1>
			<a href="" class="btn btn--primary">Call to action</a>
		</div>
	</div>
</div>

Responsive hero with centered content overlay

<div class="relative">
	<img src="https://source.unsplash.com/1920x720?nature" alt="Nature" class="relative">
	<div class="hidden md:block absolute bg-black opacity-30 inset-0"></div>
	<div class="text-center p-6 lg:px-24 border border-gray-200 md:border-0 md:absolute md:text-white md:inset-0 md:flex md:items-center md:justify-center">
		<div class="w-full">
			<h1 class="text-lg-2 mb-2 md:text-lg-3 lg:text-lg-5 lg:font-sans-light">Make a compelling statement</h1>
			<a href="" class="btn btn--primary md:shadow-md">Call to action</a>
		</div>
	</div>
</div>

Left-aligned content

<div class="relative mb-12">
	<img src="https://source.unsplash.com/1920x720?nature" alt="Nature" class="relative">
	<div class="hidden md:block absolute bg-black opacity-30 inset-0"></div>
	<div class="text-center justify-center md:text-left p-6 lg:px-24 border border-gray-200 md:border-0 md:absolute md:text-white md:inset-0 md:flex md:items-center md:justify-start">
		<div class="w-full md:w-1/2">
			<h1 class="text-lg-2 mb-2 md:text-lg-3 md:mb-6 md:leading-none lg:mb-8 lg:text-lg-5 lg:font-sans-light">Make a <span class="lg:block">compelling statement</span></h1>
			<a href="" class="btn btn--primary md:shadow-md">Call to action</a>
		</div>
	</div>
</div>

Right-aligned content

<div class="relative">
	<img src="https://source.unsplash.com/1920x720?nature" alt="Nature" class="relative">
	<div class="hidden md:block absolute bg-black opacity-30 inset-0"></div>
	<div class="text-center justify-center md:text-left p-6 lg:px-24 border border-gray-200 md:border-0 md:absolute md:text-white md:inset-0 md:flex md:items-center md:justify-end">
		<div class="w-full md:w-1/2">
			<h1 class="text-lg-2 mb-2 md:text-lg-3 md:mb-6 md:leading-none lg:mb-8 lg:text-lg-5 lg:font-sans-light">Make a <span class="lg:block">compelling statement</span></h1>
			<a href="" class="btn btn--primary md:shadow-md">Call to action</a>
		</div>
	</div>
</div>