CCHub Logo CCHub Tailwind Collection
组件 360° 查看器 360° 查看组件

360° 查看组件

一个简单的360°查看器组件，采用材料设计风格，具有土壤色调，适用于电子商务环境。它包括响应式设计，支持暗模式，展示来自picsum.photos的图片和来自randomuser.me的头像。

预览

HTML 代码 

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

相关组件

360° 观看器组件

专为电子商务设计的响应式 360 度查看器组件，支持深色模式。造型为复古/复古，采用柔和的配色方案。仅使用 HTML 和 Tailwind CSS。

打开

拟态360查看器组件

一个360°的查看器组件，采用拟物设计，三原色配色方案（例如：浅蓝色、粉色、黄橙色），适用于社交媒体应用，复杂度适中。该组件是响应式的，支持使用Tailwind类的暗黑模式，并使用picsum.photos作为图片和randomuser.me作为头像。不需要JavaScript。

打开

360_Viewer_Component_Watercolor_Corporate_Blues

一个复杂的 360° 查看器组件，具有水彩/艺术设计风格和企业蓝色配色方案，专为预订和预订系统量身定制。它具有多个交互元素，并且完全响应暗模式支持。

打开