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>
<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>