ウィッシュリストコンポーネント

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

    <!-- Skeuomorphic Container -->
    <div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl 
                shadow-2xl dark:shadow-none 
                border-t-2 border-l-2 border-gray-50 dark:border-gray-600 
                border-r-2 border-b-2 border-gray-400 dark:border-gray-900 
                p-8 space-y-8 
                relative 
                overflow-hidden">

        <!-- Inner Bevel/Emboss Effect -->
        <div class="absolute inset-4 rounded-2xl 
                    bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700 
                    shadow-inner-xl dark:shadow-inner-dark 
                    opacity-75">
        </div>

        <div class="relative z-10">
            <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center 
                        drop-shadow-lg dark:drop-shadow-none 
                        [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
                My Wishlist
            </h1>

            <!-- Wishlist Items Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                <!-- Wishlist Item 1 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 2 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

                <!-- Wishlist Item 3 -->
                <div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 
                            rounded-2xl p-6 
                            shadow-lg dark:shadow-xl 
                            border-t border-l border-slate-50 dark:border-slate-600 
                            border-r border-b border-slate-300 dark:border-slate-900 
                            flex flex-col items-center space-y-4 
                            transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
                    <img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
                    <p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
                    <div class="flex items-center space-x-2">
                        <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
                        <span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
                    </div>
                    <button class="w-full py-3 rounded-xl 
                                bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700 
                                text-white font-bold 
                                shadow-md dark:shadow-lg 
                                border-t border-l border-indigo-400 dark:border-indigo-500 
                                border-r border-b border-blue-700 dark:border-blue-800 
                                active:shadow-inner active:from-blue-600 active:to-indigo-500 
                                transform transition duration-200 
                                focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
                        <i class="fas fa-heart mr-2"></i> Add to Cart
                    </button>
                </div>

            </div>

            <!-- Call to Action / Share Wishlist Button -->
            <div class="mt-10 text-center">
                <button class="py-4 px-8 rounded-full 
                            bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700 
                            text-white font-extrabold text-lg 
                            shadow-xl dark:shadow-none 
                            border-t border-l border-green-200 dark:border-green-500 
                            border-r border-b border-emerald-600 dark:border-emerald-800 
                            active:shadow-inner active:from-emerald-500 active:to-green-400 
                            transform transition duration-200 
                            focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
                    <i class="fas fa-share-alt mr-3"></i> Share My Wishlist
                </button>
            </div>

        </div>
    </div>
</div>

<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
    .shadow-inner-xl {
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
    }

    .dark .shadow-inner-dark {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
    }
</style>