具有类似配色方案的 3D 热图组件,适用于产品组合。它响应迅速并支持深色模式。
<div class="p-8 dark:bg-gray-900 min-h-screen"> <div class="max-w-7xl mx-auto"> <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center">3D Heat Map Portfolio</h2> <!-- Responsive Grid for Heat Map Squares --> <div class="grid grid-cols-7 sm:grid-cols-14 md:grid-cols-21 lg:grid-cols-28 gap-1"> {[...Array(98)].map((_, i) => ( <div key={i} class="w-6 h-6 rounded-md shadow-md transform hover:scale-110 transition-transform duration-200" style={`background-color: hsl(${10 + i * 2}, 70%, ${50 + (i % 2) * 5}%); transform: rotateX(15deg) rotateY(15deg);`}></div> ))} </div> <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- Project 1 --> <div class="bg-gradient-to-br from-green-300 to-teal-400 dark:from-green-700 dark:to-teal-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105"> <h3 class="text-2xl font-semibold text-white mb-3">Project Alpha Insights</h3> <p class="text-white text-opacity-90 leading-relaxed">Showcasing data trends with a unique 3D heat map visualization. This interactive element provides deep insights into user engagement over time, making complex data easily digestible for stakeholders.</p> <img src="https://picsum.photos/400/250?random=1" alt="Project Alpha" class="mt-4 rounded-lg shadow-md"> </div> <!-- Project 2 --> <div class="bg-gradient-to-br from-blue-300 to-indigo-400 dark:from-blue-700 dark:to-indigo-800 p-6 rounded-lg shadow-xl transform transition duration-300 hover:scale-105"> <h3 class="text-2xl font-semibold text-white mb-3">User Flow Analytics</h3> <p class="text-white text-opacity-90 leading-relaxed">A detailed heat map demonstrating user navigation paths on a e-commerce platform. The 3D perspective highlights popular routes and potential bottlenecks, informing design optimizations.</p> <img src="https://picsum.photos/400/250?random=2" alt="Project Beta" class="mt-4 rounded-lg shadow-md"> </div> </div> <div class="mt-12 text-center"> <h3 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Meet the Creator</h3> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 shadow-lg"> <p class="text-gray-700 dark:text-gray-300 text-lg">John Doe, Data Visualization Specialist</p> <p class="text-gray-600 dark:text-gray-400 text-md mt-2">"Passionate about transforming complex data into beautiful and intuitive visual stories."</p> </div> </div> </div>
一个用于农业/农业网站的简单响应式热图组件,具有复古/复古配色方案和深色模式支持,在设计时考虑了微交互。
一个响应式热图组件,具有工业风格的森林绿色美感,适用于社交媒体界面,支持明暗模式。
一个采用玻璃形态效果设计的响应式热图组件,具有像磨砂玻璃一样的半透明元素,并支持深色主题样式,利用 Tailwind CSS。