社交组件

社交组件组件

一个响应式社交媒体组件，为商业网站提供深色模式支持，具有三元配色方案。

                <div class="dark:bg-gray-900 bg-teal-100 p-6 flex flex-col md:flex-row items-center justify-around">
  <div class="dark:bg-gray-800 bg-teal-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-teal-900 text-xl font-semibold mb-4">Our Latest Post</h3>
    <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="rounded-md mb-4">
    <p class="dark:text-gray-300 text-teal-800 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="dark:text-purple-400 text-blue-700 hover:underline">Read More</a>
  </div>

  <div class="dark:bg-gray-800 bg-red-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-red-900 text-xl font-semibold mb-4">Connect With Us</h3>
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="dark:text-gray-300 text-red-800">Follow us on Twitter!</p>
    </div>
    <button class="dark:bg-purple-600 bg-blue-600 text-white px-4 py-2 rounded-md hover:dark:bg-purple-700 hover:bg-blue-700">Follow</button>
  </div>

  <div class="dark:bg-gray-800 bg-orange-200 rounded-lg shadow-lg p-6 m-4 w-full md:w-1/3">
    <h3 class="dark:text-white text-orange-900 text-xl font-semibold mb-4">Our Community</h3>
    <ul class="list-disc list-inside dark:text-gray-300 text-orange-800">
      <li>10K+ Members</li>
      <li>Active Discussions</li>
      <li>Exclusive Content</li>
    </ul>
    <a href="#" class="dark:text-purple-400 text-blue-700 hover:underline mt-4 block">Join Our Community</a>
  </div>
</div>

社交组件组件

社交组件具有拟物化设计、互补配色方案和中等复杂性的组件。它专为商业/公司网站设计，响应式并支持深色主题。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans"><div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full transform transition duration-500 hover:scale-105 group" style="box-shadow: 0 15px 30px rgba(0,0,0,0.2), inset 0 -5px 10px rgba(0,0,0,0.1), inset 0 5px 10px rgba(255,255,255,0.7);"> <div class="flex justify-center mb-6"><img class="w-24 h-24 rounded-full border-4 border-gray-300 dark:border-gray-600 group-hover:border-purple-500 transition duration-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" style="box-shadow: 0 0 15px rgba(0,0,0,0.2);"></div><h2 class="text-3xl font-extrabold text-gray-800 dark:text-white text-center mb-4 group-hover:text-purple-600 transition duration-500" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">John Doe</h2><p class="text-gray-600 dark:text-gray-300 text-center mb-8" style="text-shadow: 0.5px 0.5px 1px rgba(255,255,255,0.4);">Software Engineer at Acme Corp</p><div class="flex justify-around items-center mb-8"><div class="text-center"><p class="text-2xl font-bold text-blue-600 dark:text-blue-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">5.2K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Followers</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-green-600 dark:text-green-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">1.8K</p><p class="text-gray-500 dark:text-gray-400 text-sm">Following</p></div><div class="border-l border-gray-300 dark:border-gray-600 h-10"></div><div class="text-center"><p class="text-2xl font-bold text-red-600 dark:text-red-400" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">250</p><p class="text-gray-500 dark:text-gray-400 text-sm">Posts</p></div></div><div class="flex flex-col space-y-4"><button class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-purple-700 hover:to-indigo-800 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Follow</button><button class="bg-gradient-to-br from-yellow-500 to-orange-600 text-white py-3 px-6 rounded-xl text-lg font-semibold hover:from-yellow-600 hover:to-orange-700 transition duration-300 transform hover:-translate-y-1 shadow-lg dark:shadow-xl" style="box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), inset 0 -2px 5px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);">Message</button></div></div></div>

社交组件组件

一个复古/复古风格的社交媒体组件，具有丰富的界面和多个互动元素，采用互补色设计并支持深色模式。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
    <div class="bg-white dark:bg-gray-700 rounded-lg p-4">
        <div class="flex mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
        <img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
            <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
        </div>
    </div>
    <div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
        <span class="cursor-pointer hover:underline">12 Likes</span>
        <span class="cursor-pointer hover:underline">3 Comments</span>
    </div>
</div>

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

打开预览

                <!-- Ensure Tailwind CSS is included in your project -->
<!-- This is a wrapper for demonstration purposes, the actual component starts with the card -->
<div class="min-h-screen bg-gray-100 dark:bg-slate-900 flex items-center justify-center p-4 antialiased">

  <!-- Start of Social Author Card Component -->
  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md transform hover:scale-[1.01] transition-transform duration-300">
    
    <!-- Avatar -->
    <div class="flex justify-center mb-5">
      <img class="w-24 h-24 md:w-28 md:h-28 rounded-full shadow-xl border-4 border-orange-500 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
    </div>

    <!-- Author Info -->
    <div class="text-center">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-1">Sarah Meyers</h2>
      <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Lead Content Creator</p>
      <p class="text-gray-700 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6 px-2 sm:px-4">
        Crafting stories and sharing insights on modern web development and digital trends. Join me on my journey!
      </p>
    </div>

    <!-- Social Links -->
    <div class="flex justify-center space-x-3 sm:space-x-4 mb-8">
      <!-- Twitter/X Icon -->
      <a href="#" title="Twitter" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>
      </a>
      <!-- LinkedIn Icon -->
      <a href="#" title="LinkedIn" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"></path>
        </svg>
      </a>
      <!-- GitHub Icon -->
      <a href="#" title="GitHub" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.036 1.531 1.036.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.853 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
        </svg>
      </a>
    </div>

    <!-- Follow Button -->
    <div class="flex justify-center">
      <button class="w-full sm:w-auto px-8 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:active:bg-orange-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-px active:shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-500 focus:ring-opacity-75">
        Follow Me
      </button>
    </div>

  </div>
  <!-- End of Social Author Card Component -->

</div>

一个拟物化社交组件，专为博客/内容目的而设计，具有鲜艳的色彩和深色模式支持。

打开预览

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
      <p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
    <div class="flex-1">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
      <p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
      <span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
    </div>
    <a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
  </div>

  <div class="text-right">
    <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts &rarr;</a>
  </div>
</div>

社交组件

一个简单的社交媒体组件，使用 Skeuomorphism 和博客内容的单色配色方案设计。它具有使用 Tailwind CSS 的响应式布局和深色主题支持。

打开预览

                <div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/300" alt="Social image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Social Update</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Engaging Title Here</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a short description of the social update. It's designed to be concise and engaging for blog readers.</p>
      <div class="mt-4 flex items-center">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-500">Posted on Oct 26, 2023</p>
        </div>
      </div>
    </div>
  </div>
</div>

社交组件

一个简单的社交媒体组件，使用 Tailwind CSS 并根据 Material Design 原则设计。它具有鲜艳的色彩和深色模式支持，使其适用于社交网络界面。

打开预览

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
    <div class="p-4">
        <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
        <div class="mt-4 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
        </div>
    </div>
</div>

社交组件

具有粗野派和柔和设计的仪表板的社交组件。它显示带有姓名、头衔和头像的用户配置文件，并包含用于社交作（如关注、消息和共享）的按钮。该组件响应迅速，并支持深色模式。

打开预览

                <div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
  <div class="flex items-center">
    <img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
      <p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
    </div>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-4">
    <button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
    <button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
  </div>
</div>

社交组件

一个响应式社交媒体组件，采用 Neumorphism 风格和深色主题支持设计，具有简单的布局和最少的元素。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-300">@john_doe</p>
        </div>
    </div>
    <p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
    <img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
    <div class="mt-4 flex justify-between">
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
    </div>
</div>

社交组件

复古/怀旧社交组件，采用单色调色方案，复杂度简单，旨在博客/内容设计，并支持暗主题。

打开预览

                ```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
  <div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
      <p class="dark:text-gray-300 text-gray-700 text-base">
        This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
      </p>
    </div>
    <div class="px-6 pt-4 pb-2">
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
    </div>
    <div class="flex items-center px-6 py-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
        <p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
      </div>
    </div>
  </div>
</div>
```

类别

社交组件

社交组件组件

社交组件组件

社交组件组件

3D Social 作者卡片

社交组件

社交组件

社交组件

社交组件

社交组件

社交组件