Componenti Carte Componente Schede

Componente Schede

Un componente di carte dal design minimalista e piatto per i sistemi di prenotazione/prenotazione, caratterizzato da una combinazione di colori arcobaleno sfumato. È reattivo, include il supporto per la modalità oscura e utilizza elementi semplici per un aspetto pulito.

Anteprima

Codice HTML

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">

    <!-- Card 1: Available Time Slot -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Morning Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white shadow-md">Available</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">09:00 AM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 60 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-purple-600 hover:via-pink-600 hover:to-red-600 shadow-lg">
          Book Now
        </button>
      </div>
    </div>

    <!-- Card 2: Fully Booked -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Afternoon Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 text-white shadow-md">Fully Booked</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-400 dark:text-gray-600">02:00 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 90 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold cursor-not-allowed opacity-60
                       bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 shadow-lg">
          View Details
        </button>
      </div>
    </div>

    <!-- Card 3: Next Day Availability -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Evening Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 text-white shadow-md">Limited</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Thursday, October 27, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">07:30 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 45 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500 hover:from-teal-600 hover:via-cyan-600 hover:to-blue-600 shadow-lg">
          Pre-book
        </button>
      </div>
    </div>

  </div>
</div>

Componenti correlati

Forum_Community_Cards_Component

Un componente di carte reattivo e interattivo per un forum o una piattaforma di community, con una combinazione di colori retrò/vintage e sottili effetti al passaggio del mouse per le microinterazioni. Include il supporto per la modalità oscura e l'HTML semantico.

Aperto