内容显示组件

一个响应式组件,用于以深色模式样式和柔和的配色方案展示作品或产品。

预览

HTML 代码

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-pink-300 dark:text-pink-200 mb-4">Project Title</h2>
  <img src="https://picsum.photos/400/200" alt="Project Image" class="rounded-lg mb-4 shadow-md">
  <p class="text-gray-300 dark:text-gray-200 mb-4">This is a brief description of the project. It showcases the unique features and the value it brings to users.</p>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2 shadow-lg">
    <span class="text-gray-400 dark:text-gray-200">Posted by John Doe</span>
  </div>
  <a href="#" class="inline-block bg-pink-500 hover:bg-pink-400 text-white font-semibold py-2 px-4 rounded mt-2">View More</a>
</div>

相关组件

内容展示组件

一个响应式内容显示组件,专为商业/企业网站设计,支持黑暗模式,配色生动。它包括用户头像、文本内容和图像的部分。

打开

内容展示组件

一个简单的响应式内容显示组件,采用粗犷主义风格和互补色设计。适合商业/企业网站,支持黑暗模式。

打开

内容显示组件

一个用玻璃拟态风格设计的响应式内容展示组件,具有模糊背景和半透明元素,支持深色模式。

打开