Split Showcase Hero

/* Source: Mert Cukuren (Tailblocks) — https://github.com/mertJF/tailblocks/blob/master/src/blocks/hero/dark/a.js — MIT. Included under its original licence. */
/* Copyright (c) 2020 Mert Cukuren. MIT License. */

export default function SrcSplitShowcaseHero() {
  return (
    <section className="bg-gray-900 font-sans text-gray-400">
      <div className="container mx-auto flex flex-col items-center px-5 py-24 md:flex-row">
        <div className="mb-16 flex flex-col items-center text-center md:mb-0 md:w-1/2 md:items-start md:pr-16 md:text-left lg:flex-grow lg:pr-24">
          <h1 className="title-font mb-4 text-3xl font-medium text-white sm:text-4xl">
            Before they sold out
            <br className="hidden lg:inline-block" />
            readymade gluten
          </h1>
          <p className="mb-8 leading-relaxed">
            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant
            cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage
            hot chicken authentic tumeric truffaut hexagon try-hard chambray.
          </p>
          <div className="flex justify-center">
            <button className="inline-flex rounded border-0 bg-indigo-500 px-6 py-2 text-lg text-white transition-colors hover:bg-indigo-600 focus:outline-none">
              Get Started
            </button>
            <button className="ml-4 inline-flex rounded border-0 bg-gray-800 px-6 py-2 text-lg text-gray-400 transition-colors hover:bg-gray-700 hover:text-white focus:outline-none">
              Learn More
            </button>
          </div>
        </div>
        <div className="w-5/6 md:w-1/2 lg:w-full lg:max-w-lg">
          <div
            aria-hidden="true"
            className="aspect-[6/5] w-full rounded bg-gradient-to-br from-indigo-500 via-purple-500 to-fuchsia-500 object-cover object-center shadow-2xl shadow-indigo-500/20"
          />
        </div>
      </div>
    </section>
  );
}