종이/인쇄에서 영감을 받은 예약 카드

<div class="p-4 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 md:max-w-md lg:max-w-lg border border-stone-200 dark:border-stone-700 hover:shadow-lg dark:hover:shadow-stone-700/50">
    
    <!-- Paper-like Header -->
    <div class="relative bg-gradient-to-r from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-700/80 p-4 border-b-2 border-stone-300 dark:border-stone-700/80 text-stone-800 dark:text-stone-100 print:text-black">
      <div class="absolute inset-0 bg-paper-texture opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h3 class="text-xl font-serif tracking-wide">Appointment Slot</h3>
      <p class="text-sm text-stone-600 dark:text-stone-300 italic">Book your session now</p>
    </div>

    <!-- Content Area resembling printed text -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      
      <!-- Appointment Details -->
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Wednesday, October 26, 2024</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Available All Day</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">10:00 AM - 11:00 AM</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 hour session</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Virtual Meeting (Zoom)</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Link will be sent after booking</p>
        </div>
      </div>

      <!-- Provider/Context Info (optional) -->
      <div class="pt-4 border-t border-dashed border-stone-300 dark:border-stone-600 flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full object-cover border-2 border-stone-300 dark:border-stone-500" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Alice Johnson">
        <div>
          <p class="text-base font-semibold">With Dr. Alice Johnson</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Consultation Specialist</p>
        </div>
      </div>

    </div>

    <!-- Actions resembling perforation or torn paper edge -->
    <div class="p-6 flex justify-end bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700">
      <button class="px-6 py-2 bg-emerald-700 text-white rounded-md hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-colors duration-200 shadow-sm text-sm font-medium tracking-wide dark:hover:bg-emerald-600">
        Book Now
      </button>
    </div>

  </div>
</div>