Homepage Banner with Image

Preview

HTML Code

<div class="container explore-widget">  
  <div class="bg-brand-primary 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-white sm:text-4xl">Title</h2>
        <p class="mt-2 text-lg leading-6 text-white">Description</p>
          <!-- Add button URL below -->
          <a href="" class="mt-4 btn btn--lg bg-white text-brand-primary hover:text-brand-primary hover:bg-gray-100">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">                                                  <!-- Add image URL below -->
      <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>