适用于商业/公司网站的简单野兽派风格灰度仪表板布局,响应式深色模式支持,使用 Tailwind CSS 构建。
<section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white"> <div class="max-w-7xl mx-auto"> <!-- Banner --> <div class="mb-8 border-4 border-black dark:border-white"> <img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover"> </div> <!-- Header --> <div class="flex items-center justify-between mb-8"> <h1 class="text-3xl font-extrabold">Company Dashboard</h1> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white"> </div> <!-- Stats Grid --> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2"> <h2 class="text-xl font-bold mb-2">Total Sales</h2> <p class="text-2xl">67,890</p> </div> <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2"> <h2 class="text-xl font-bold mb-2">New Users</h2> <p class="text-2xl">1,234</p> </div> <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2"> <h2 class="text-xl font-bold mb-2">Performance</h2> <p class="text-2xl">78%</p> </div> </div> </div> </section>
一个复杂的响应式游戏仪表板 UI 组件,专为深色模式而设计,具有灰度配色方案。包括玩家统计信息、最近的活动和游戏列表。
设计有3D元素和大地色调的响应式仪表板组件,展示数据可视化和控制面板,支持暗主题。
一个简单的仪表板组件,具有 3D 设计和柔和的配色方案,响应式并支持深色模式。