<!-- This example requires Tailwind CSS v2.0+ -->
<template>
  <div class="relative bg-gray-800 py-32 px-6 sm:py-40 sm:px-12 lg:px-16">
    <div class="absolute inset-0 overflow-hidden">
      <img src="https://tailwindui.com/img/ecommerce-images/home-page-03-feature-section-full-width.jpg" alt="" class="h-full w-full object-cover object-center" />
    </div>
    <div aria-hidden="true" class="absolute inset-0 bg-gray-900 bg-opacity-50" />
    <div class="relative mx-auto flex max-w-3xl flex-col items-center text-center">
      <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">Long-term thinking</h2>
      <p class="mt-3 text-xl text-white">We're committed to responsible, sustainable, and ethical manufacturing. Our small-scale approach allows us to focus on quality and reduce our impact. We're doing our best to delay the inevitable heat-death of the universe.</p>
      <a href="#" class="mt-8 block w-full rounded-md border border-transparent bg-white py-3 px-8 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto">Read our story</a>
    </div>
  </div>
</template>
