组件 功能组件 功能组件组件

功能组件组件

一个模仿现实世界对应物的网络组件,采用商业企业风格,具有互补色彩方案、简单布局以及支持暗模式的响应式设计。

预览

HTML 代码

<div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

相关组件

拟物功能组件

一个遵循神经形态设计风格的网络组件,使用Tailwind CSS构建。它通过CSS纯粹支持响应式设计和黑暗模式。

打开

功能组件 - 残酷主义风格

一个采用粗犷主义风格设计的功能性网页组件,使用 Tailwind CSS。该组件具有大胆的布局、高对比度、响应效果,并支持深色主题。它包括占位图像和头像以增强视觉吸引力。

打开

电子商务功能组件

极简平面设计的电子商务组件,具有三原色配色方案和响应式深色模式支持。

打开