专为商业或公司网站设计的复古风格仪表板组件,将 80 年代/90 年代的美学与现代布局和配色方案相结合。它是响应式的,并支持深色主题,具有交互式元素,例如统计信息、用户配置文件等卡片。
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900"> <header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg"> <h1 class="text-2xl font-bold text-white">Dashboard</h1> <button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button> </header> <main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> <h2 class="font-semibold text-lg">Total Sales</h2> <p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p> <img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg"> </div> <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> <h2 class="font-semibold text-lg">Users</h2> <p class="text-2xl text-purple-500 dark:text-purple-300">1200</p> <img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg"> </div> <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> <h2 class="font-semibold text-lg">Feedback</h2> <p class="text-2xl text-purple-500 dark:text-purple-300">300</p> <img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg"> </div> <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md"> <h2 class="font-semibold text-lg">Team Members</h2> <div class="flex space-x-2 mt-4"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full"> <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full"> <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full"> <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full"> </div> </div> </main> <footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4"> <p>© 2023 Company Name. All rights reserved.</p> </footer> </div>
用于约会/社交平台的中等复杂度仪表板组件,具有装饰艺术设计风格,具有柔和/不饱和的色彩和完全响应能力。包括个人资料卡、活动源和导航,并支持深色模式。
具有微交互、灰度配色方案和复杂复杂度的响应式仪表板组件,专为博客/内容目的而设计。支持黑暗主题。
一个具有响应式设计和深色模式支持的仪表板组件,使用 Tailwind CSS。