Summer Sale – Use code oxbow20 at checkout for a 20% discount.

bento grids

1
<div class="max-w-7xl mx-auto">
  <div class="grid grid-cols-1 gap-2 lg:items-center lg:grid-cols-2">
    <div
      class="relative flex flex-col items-center justify-center h-full p-8 overflow-hidden text-center bg-zinc-50 rounded-2xl lg:p-12"
    >
      <div class="relative items-center text-balance">
        <p class="text-xs font-bold uppercase text-blue-600">Tagline</p>
        <h3
          class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-zinc-900"
        >
          Transforming the banking experience for a digital future
        </h3>
        <p class="text-base mt-2 font-medium text-zinc-600">
          The fastest method for working together on staging and temporary
          environments.
        </p>
        <div
          class="flex flex-wrap items-center justify-center mx-auto mt-8 gap-2"
        >
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
          >
            Get started
          </button>
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-zinc-700 bg-white outline outline-zinc-200 hover:shadow-sm focus:outline-zinc-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
          >
            Learn more
          </button>
        </div>
      </div>
    </div>
    <div class="h-full grid grid-cols-1 gap-2 lg:grid-cols-2">
      <div
        class="relative flex flex-col justify-between h-full overflow-hidden bg-zinc-50 rounded-2xl"
      >
        <div class="relative p-8">
          <p class="text-xs font-bold uppercase text-blue-600">Tagline</p>
          <h3 class="text-lg md:text-xl mt-4 font-medium text-zinc-900">
            Schedule
          </h3>
          <p class="text-sm mt-2 font-medium text-zinc-500">
            Schedule your integrations effortlessly and automate tasks for
            seamless workflows.
          </p>
        </div>
        <div class="ml-8 -mb-4 lg:absolute -bottom-4 -right-8">
          <img
            class="h-full shadow rounded-l-xl"
            src="/widgets/calendar.svg"
            alt=""
          />
        </div>
      </div>
      <div class="h-full grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-1">
        <div
          class="relative flex items-center justify-center h-full p-8 overflow-hidden text-center bg-zinc-50 rounded-2xl"
        >
          <div>
            <img
              class="h-12 mx-auto"
              src="/images/oxbow/oxbowLogo.png"
              alt="#_"
            />
            <h3 class="text-lg md:text-xl mt-4 font-medium text-zinc-900">
              Connect your app
            </h3>
            <p class="text-sm mt-2 font-medium text-zinc-500">
              Connection secure, fast and easy. You can disconnect at any time.
            </p>
            <div class="flex justify-center mt-8">
              <button
                class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-zinc-700 bg-white outline outline-zinc-200 hover:shadow-sm focus:outline-zinc-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
              >
                See our integrations
              </button>
            </div>
          </div>
        </div>
        <div class="p-8 bg-zinc-50 rounded-2xl">
          <p class="text-xs font-bold uppercase text-blue-600">Tagline</p>
          <h3 class="text-lg md:text-xl mt-4 font-medium text-zinc-900">
            Easy Integration
          </h3>
          <p class="text-sm mt-2 font-medium text-zinc-500">
            Integrating with existing systems is smooth and hassle-free, thanks
            to our incredible flexible approach.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>