一个为社交网络接口设计的灰度色彩方案的极简列组件。它具有支持黑暗主题的响应式布局。
<div class="container mx-auto p-4 md:p-8"> <h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg"> <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2> <p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p> <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image"> </div> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg"> <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar"> <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2> <p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p> <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image"> </div> <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg"> <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar"> <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2> <p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p> <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image"> </div> </div> </div>
用于工作板和职业发展平台的豪华/高级单色色谱柱组件。它具有精致的设计、优雅的排版、丰富的界面元素、完全响应能力和深色模式支持。
仪表板的简单三列布局,具有类似 3D 的卡片,具有鲜艳的色彩和深色模式支持。
一个简单、优雅的三列布局组件,适用于约会/社交平台,具有黑色、白色和强调色调色板的奢华美感、完全响应能力和深色模式支持。