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

愿望清单组件

一个使用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>

相关组件

愿望清单组件

一个具有3D设计风格、柔和色彩方案和响应式设计的愿望单组件,适用于支持暗模式的商业网站。

打开

愿望清单组件

具有响应效果和深色主题支持的极简/扁平设计愿望清单组件。

打开

愿望清单组件

黑暗模式愿望清单组件,配有简单的单色设计,用于仪表板

打开