Griglia sanitaria vibrante ispirata alla carta

<div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-purple-950 dark:via-indigo-950 dark:to-blue-950 font-sans">

  <div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-indigo-500 dark:border-indigo-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/1005/60/60" alt="Microscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-400 ml-4">Lab Results</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Access your latest diagnostic reports and detailed analysis from our state-of-the-art laboratory.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800">
          View Details
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-sky-500 dark:border-sky-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-sky-100 to-cyan-100 dark:from-sky-900 dark:to-cyan-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/177/60/60" alt="Pills and Stethoscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-sky-700 dark:text-sky-400 ml-4">Medication Refills</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Easily request prescription refills and manage your current medication schedule online.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-800">
          Order Refill
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-emerald-500 dark:border-emerald-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-lime-100 dark:from-emerald-900 dark:to-lime-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/453/60/60" alt="Heart Monitor" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-400 ml-4">Health Records</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Keep track of your complete medical history, immunizations, and past appointments securely.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800">
          Access Records
          <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

  </div>
</div>