CCHub Logo CCHub Tailwind Collection
组件 内容显示组件 内容展示组件

内容展示组件

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

预览

HTML 代码 

<div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

相关组件

简单内容展示

一个简单的内容显示组件，具有响应式设计和深色主题支持，使用 Tailwind CSS。

打开

复古社交媒体明信片

具有 80 年代/90 年代复古美学的响应式社交媒体明信片组件，使用带有紫红色口音的类似配色方案（天空、蓝绿色、紫色）。具有深色模式支持和交互式悬停效果。内容包括用户头像、用户名、时间戳、文本帖子、图像和作按钮（点赞、评论、分享）。使用 Tailwind CSS 构建。

打开

Pastel3DBlogContentCard

用于博客或内容部分的响应式内容显示组件，使用 Tailwind CSS 设计。它具有简单的布局，具有 3D 风格的美感，使用阴影和悬停效果。配色方案是浅色模式的柔和粉彩，具有兼容的深色模式主题。该组件包括图像、标题、元数据（作者/日期）、摘录和“阅读更多”按钮。占位符图像使用 picsum.photos 和 randomuser.me。

打开