Code Snippet Library - Homepage Banner with Image

Preview

HTML

<div class="container mt-12">  
  <div class="bg-brand-secondary rounded overflow-hidden 
  lg:grid lg:grid-cols-2 lg:gap-4">
    <div class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 
    xl:py-20 xl:px-20">
      <div class="lg:self-center">
        <h2 class="text-3xl font-extrabold text-brand-secondary-contrast 
        sm:text-4xl">Title</h2>
        <p class="mt-2 text-lg leading-6 text-brand-secondary-contrast">
        Description</p>
          <!-- Add button URL below -->
          <a href="" class="mt-4 btn btn--lg btn--primary">Button text</a>
      </div>
    </div>
    <!-- Banner image -->
    <div class="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
      <img class="transform translate-x-6 translate-y-6 rounded-md 
      object-cover object-left-top sm:translate-x-16 lg:translate-y-20"
      src="" alt="Add relevant alt text here">
    </div>
  </div>
</div>