<header class="relative overflow-hidden bg-gradient-to-r from-blue-500 via-sky-500 to-blue-500">
<div class="relative z-10 mx-auto max-w-screen-xl px-4 py-24">
<div class="text-center">
<h1 class="mx-auto mb-4 max-w-lg text-3xl font-black text-gray-50 sm:text-4xl lg:max-w-2xl lg:text-5xl">We Offer Medical Health Services For all Ages</h1>
<div>
<button>
<a class="text-md m-2 block rounded-lg bg-gray-50 px-4 py-2 font-medium text-blue-600">Our Services</a>
</button>
<button>
<a class="text-md m-2 block rounded-lg bg-blue-600 px-4 py-2 font-medium text-gray-50">More Info</a>
</button>
</div>
</div>
</div>
<!-- PATTERN -->
<div>
<div class="absolute top-[50%] left-[50%] h-[60px] w-[60px] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-gray-50/20"></div>
<div class="absolute top-[50%] left-[50%] h-[160px] w-[160px] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-gray-50/20"></div>
<div class="absolute top-[50%] left-[50%] h-[260px] w-[260px] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-gray-50/20"></div>
<div class="absolute top-[50%] left-[50%] h-[380px] w-[380px] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-gray-50/20"></div>
<div class="absolute top-[50%] left-[50%] h-[480px] w-[480px] -translate-x-[50%] -translate-y-[50%] rounded-full border-2 border-gray-50/20"></div>
</div>
</header>
<section class="relative">
<div class="absolute h-[340px] w-full bg-gradient-to-r from-blue-500 via-sky-500 to-blue-500 md:h-[240px] lg:h-[140px]"></div>
<div class="relative z-20 mx-auto max-w-screen-xl">
<div class="mx-4 rounded-lg bg-gray-50 p-6 shadow">
<div class="grid grid-cols-12 gap-y-6 sm:gap-6">
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="rounded-lg bg-blue-100 p-5">
<h3 class="text-lg font-bold text-gray-900 md:text-xl lg:text-2xl">Emergency Contact</h3>
<p class="md:text-md my-3 text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum amet totam reiciendis ab mollitia, a animi soluta illo temporibus expedita.</p>
<button>
<a class="md:text-md block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-gray-50">Call Now</a>
</button>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="rounded-lg bg-blue-100 p-5">
<h3 class="text-lg font-bold text-gray-900 md:text-xl lg:text-2xl">Appointments</h3>
<p class="md:text-md my-3 text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum amet totam reiciendis ab mollitia, a animi soluta illo temporibus expedita.</p>
<button>
<a class="md:text-md block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-gray-50">Call Now</a>
</button>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="rounded-lg bg-blue-100 p-5">
<h3 class="text-lg font-bold text-gray-900 md:text-xl lg:text-2xl">Doctors Timetable</h3>
<p class="md:text-md my-3 text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum amet totam reiciendis ab mollitia, a animi soluta illo temporibus expedita.</p>
<button>
<a class="md:text-md block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-gray-50">Call Now</a>
</button>
</div>
</div>
<div class="col-span-12 md:col-span-6 lg:col-span-3">
<div class="rounded-lg bg-blue-100 p-5">
<h3 class="text-lg font-bold text-gray-900 md:text-xl lg:text-2xl">Working Time</h3>
<p class="md:text-md my-3 text-sm text-gray-700">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum amet totam reiciendis ab mollitia, a animi soluta illo temporibus expedita.</p>
<button>
<a class="md:text-md block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-gray-50">Call Now</a>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
