Brutalism ブッキング メディア コンポーネント

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_#EF4444] dark:shadow-[8px_8px_0_0_#1E3A8A] transition-all duration-300 ease-in-out">
    <div class="relative overflow-hidden bg-red-500 dark:bg-red-700 h-48 sm:h-56 lg:h-64 border-b-4 border-black dark:border-red-500">
      <img src="https://picsum.photos/600/400?random=1" alt="Booking slot preview" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-filter duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-300 dark:text-yellow-200 uppercase leading-none break-words">
          Book Your
          <span class="block">Next Slot</span>
        </h3>
      </div>
    </div>

    <div class="p-4 sm:p-6 border-b-4 border-black dark:border-red-500">
      <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 uppercase mb-2">
        Available now!
      </p>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 font-medium leading-tight">
        Secure your spot for an exclusive consultation. Limited availability each week.
      </p>
    </div>

    <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Facilitator's avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-black dark:border-yellow-400 object-cover grayscale hover:grayscale-0 transition-filter duration-300">
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-extrabold text-base sm:text-lg uppercase leading-none">Jane Doe</p>
          <p class="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-400">Senior Consultant</p>
        </div>
      </div>
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-4 border-black dark:border-blue-700 bg-yellow-300 dark:bg-yellow-500 text-black dark:text-white font-extrabold text-lg uppercase shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#1E3A8A] hover:bg-yellow-400 dark:hover:bg-yellow-600 transition-all duration-200 ease-in-out whitespace-nowrap">
        Book Slot
        <svg class="ml-2 -mr-1 w-5 h-5" 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>