组件 愿望清单 愿望清单组件

愿望清单组件

一个使用Tailwind CSS设计的响应式愿望清单组件,采用暗模式。它具有卡片布局,展示带有图像、描述和用户头像的项目,支持暗主题和响应效果。

预览

HTML 代码

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
        <div class="space-y-4">
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 1</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 2</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 3</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

相关组件

RetroWishlistComponent

一个简单、响应迅速的愿望清单组件,具有复古/复古美学、秋季配色方案和深色模式支持,适用于文档或知识库网站。

打开

Wishlist_Component

一个复杂的三色企业/专业愿望清单组件,适用于仪表板,具有响应式设计和深色模式支持。

打开

愿望清单组件

一个响应式愿望清单组件,采用复古/复古美学设计,具有三重配色方案和深色模式支持,非常适合展示作品或产品。

打开