采用拟物化样式设计的 360° 查看器组件,采用灰度配色方案。它具有适用于社交媒体应用程序的中等复杂度界面,支持浅色和深色主题。
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg"> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">360° Viewer</h2> <div class="mt-4 w-full max-w-md h-64 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden shadow-inner"> <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-full object-cover transition-transform hover:scale-105 duration-300" /> </div> <div class="mt-4 flex items-center"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" /> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</p> <p class="text-sm text-gray-500 dark:text-gray-400">Posted 1 hour ago</p> </div> </div> <div class="mt-4"> <button class="px-4 py-2 text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Interact</button> </div> </div>
专为娱乐/媒体平台设计的复杂 360° 产品查看器组件,在温暖的中性配色方案中大量使用颜色渐变和平滑过渡。它是完全响应的,并支持深色模式。
一个简单、响应迅速的 360° 查看器组件,具有工业、原始的美感和渐变彩虹配色方案,专为金融和银行界面而设计。包括深色模式支持。
一个极简且响应式的 360° 查看器组件,使用 Tailwind CSS,支持深色模式。