<section>
<div class="px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl relative">
<div class="grid grid-cols-1 gap-12 md:grid-cols-3 md:items-end">
<div class="lg:col-span-2">
<p class="text-sm leading-normal font-bold uppercase text-accent-600">
Tagline
</p>
<h2
class="text-xl leading-tight tracking-tight sm:text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
>
Simple steps to apply for a bank account
</h2>
</div>
<p class="text-base leading-normal text-base-500 font-medium">
The fastest method for working together on staging and temporary
environments.
</p>
</div>
<dl class="grid grid-cols-1 gap-6 lg:grid-cols-3 md:grid-cols-2 mt-12">
<div class="bg-base-50 rounded-3xl shadow">
<dt class="p-8">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
1. Choose your account type
</h3>
</dt>
<dd class="p-8 border-t">
<p class="text-base leading-normal text-base-500 font-medium">
Decide whether you need a checking account, savings account, or
both. Each type has its own benefits and features.
</p>
</dd>
</div>
<div class="bg-accent-600 rounded-3xl shadow">
<dt class="p-8">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-white font-medium"
>
2. Gather required documents
</h3>
</dt>
<dd class="p-8 border-t border-white/20">
<p class="text-base leading-normal text-white font-medium">
Collect necessary documents such as ID, proof of address, and Social
Security number. This ensures a smooth application process.
</p>
</dd>
</div>
<div class="bg-base-950 rounded-3xl shadow">
<dt class="p-8">
<h3
class="text-base leading-normal sm:text-lg md:text-xl text-white font-medium"
>
3. Complete the application
</h3>
</dt>
<dd class="p-8 border-t border-white/20">
<p class="text-base leading-normal text-white font-medium">
Fill out the application form online or at your local branch.
Provide accurate information to avoid delays.
</p>
</dd>
</div>
</dl>
</div>
</section>
