カードコンポーネント
ブッキング/予約システム用のミニマリストでフラットなデザインのカードコンポーネントで、グラデーションのレインボーカラースキームが特徴です。レスポンシブで、ダークモードのサポートが含まれており、シンプルな要素を使用してすっきりとした外観になっています。
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>関連コンポーネント
3D カード コンポーネント
ダッシュボードに適した、3Dデザインスタイル、鮮やかな色、複数のインタラクティブ要素を備えたレスポンシブカードコンポーネント。Tailwindのダークプレフィックスを使用したダークモードをサポートします。
スキューモーフィック カード コンポーネント
Skeuomorphismに触発された次のカードコンポーネントは、ダークテーマのサポートにより完全にレスポンシブです。ダークモードの場合、CSSのサポートで十分です。JavaScriptは必要ありません。