Social Components

Social Components Component

A responsive social media component with dark mode support for business websites, featuring a triadic color scheme.

                <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>

Social Components Component

Social Components Component with a Skeuomorphic design, complementary color scheme, and moderate complexity. It's designed for business/corporate websites, is responsive, and supports dark themes.

Open Preview

                <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>

Social Components Component

A retro/vintage styled social media component featuring a rich interface with multiple interactive elements, designed with complementary colors and supporting dark mode.

Open Preview

                <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>

A responsive author card component with 3D effects and social media links, designed for blog/content sections. It features a complementary color scheme (Blue for identity/info, Orange for accents/CTA), supports dark mode, and uses Tailwind CSS for styling. The design is 'Simple' complexity with a basic layout and minimal elements, yet '3D Design' is incorporated for depth and engagement using shadows and hover effects. The component includes an avatar, author name, a short bio, social media icons, and a 'Follow Me' call-to-action button. It uses a randomuser.me avatar as a placeholder.

Open Preview

                <!-- 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>

A skeuomorphic social component designed for blogs/content purposes with vibrant colors and dark mode support.

Open Preview

                <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>

Social Components Component

A simple social media component designed with Skeuomorphism and a monochromatic color scheme for blog content. It features a responsive layout and dark theme support using Tailwind CSS.

Open Preview

                <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>

Social Components Component

A simple social media component using Tailwind CSS and designed with Material Design principles. It features vibrant colors and dark mode support, making it suitable for social networking interfaces.

Open Preview

                <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>

Social Components Component

A social component for a dashboard with a brutalist and pastel design. It displays a user profile with a name, title, and avatar, and includes buttons for social actions like following, messaging, and sharing. The component is responsive and supports dark mode.

Open Preview

                <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>

Social Components Component

A responsive social media component designed with Neumorphism style and dark theme support, featuring a simple layout and minimal elements.

Open Preview

                <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>

Social Components Component

Retro/Vintage Social Components Component with Monochromatic color scheme and Simple complexity, designed for Blogs/Content, with dark theme support.

Open Preview

                ```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>
```

Categories

Social Components

Social Components Component

Social Components Component

Social Components Component

3D Social Author Card

Social Components

Social Components Component

Social Components Component

Social Components Component

Social Components Component

Social Components Component