组件 社交组件 社交组件组件

社交组件组件

一个采用暗模式和单色调色方案设计的作品集组件。它以简单的布局展示作品或产品.

预览

HTML 代码

<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
            <h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
            <h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
            <h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
            <h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
    </div>
    <hr class="my-6 border-gray-700" />
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
            <div>
                <h4 class="text-lg font-semibold">Your Name</h4>
                <p class="text-gray-400">Your Title or Profession</p>
            </div>
        </div>
        <a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
    </div>
</div>

相关组件

拟物化社交组件

具有拟物化设计、响应式效果和深色主题支持的社交媒体组件。

打开

社交组件组件

一个简单的社交组件,采用拟物化风格设计,使用鲜艳的颜色,适用于专业商业网站,响应式设计并支持暗模式。

打开

3D Social 作者卡片

具有 3D 效果和社交媒体链接的响应式作者卡片组件,专为博客/内容部分而设计。它具有互补的配色方案(蓝色用于身份/信息,橙色用于强调/CTA),支持深色模式,并使用 Tailwind CSS 进行样式设置。该设计是“简单”的复杂性,具有基本布局和最少的元素,但“3D 设计”通过使用阴影和悬停效果来增加深度和参与度。该组件包括头像、作者姓名、简短的个人简介、社交媒体图标和“Follow Me”行动号召按钮。它使用 randomuser.me 头像作为占位符。

打开