Social Components

Social Components Component

A retro/vintage social media component with a simple layout and complementary color scheme. Supports dark mode and is responsive.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-xl">User Name</div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
    This is a sample social media post with a retro feel. #retro #tailwind
  </p>
  <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/300" alt="Sample Image">
  <div class="flex justify-between items-center">
    <div class="flex text-gray-700 dark:text-gray-300">
      <span class="mr-2">❤️ 120</span>
      <span>💬 30</span>
    </div>
    <div class="text-blue-600 dark:text-blue-400 font-bold">View Comments</div>
  </div>
</div>

Social Components Component

A simple social component designed with a skeuomorphic style using vibrant colors for a professional business site, responsive design with dark mode support.

Open Preview

                <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Follow us on our platforms!</p>
        <div class="flex mt-4 space-x-4">
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
                <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-400 rounded-full hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500">
                <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-red-500 rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600">
                <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="w-5 h-5">
            </a>
        </div>
    </div>
</div>

Social Components Component

A brute-styled social component showcasing portfolio items with a triadic color scheme, perfect for displaying work or products.

Open Preview

                <div class="max-w-6xl mx-auto p-6 space-y-8">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200">My Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 1</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the first portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-blue-500 text-white rounded-lg dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600">View More</a>
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full"> 
            </div>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the second portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-red-500 text-white rounded-lg dark:bg-red-700 hover:bg-red-600 dark:hover:bg-red-600">View More</a>
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </div>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the third portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-green-500 text-white rounded-lg dark:bg-green-700 hover:bg-green-600 dark:hover:bg-green-600">View More</a>
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </div>
        </div>
    </div>
</div>

Social Components Component

A complex social components section designed for business/corporate websites, using Material Design principles and a grayscale color scheme. It features responsive design and dark theme support.

Open Preview

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
                <p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
                <p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
                <p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
                <p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
                <p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
            </div>
        </div>
    </div>
</div>

Social Components Component

A microinteractions-focused social component for blogs with engaging animations and a monochromatic color scheme.

Open Preview

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
    <img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
    <div class="flex items-center space-x-4">
        <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
            </svg>
            Share
        </button>
        <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
            </svg>
            Comment
        </button>
    </div>
</div>

Social Components Component

A responsive social media component designed with a retro/vintage aesthetic, featuring a rich interface with multiple interactive elements and a dark theme.

Open Preview

                <div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
                <p class="text-gray-700 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
        <img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
        <div class="mt-4 flex justify-between">
            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
        </div>
    </div>

    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
        <div class="mt-4 space-y-4">
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
                    <p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
                </div>
            </div>
        </div>
    </div>
</div>

Social Components Component

A portfolio component designed in dark mode with a monochromatic color scheme. It showcases work or products with a simple layout.

Open Preview

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

Social Components Component

A simple responsive social media component with engaging animations and a dark theme, using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Like
        </button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Comment
        </button>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Share
        </button>
    </div>
</div>

Social Components Component

A social media component designed for a portfolio, featuring responsive design and dark theme support using Tailwind CSS. It includes placeholders for user avatars and names.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
  <div class="flex items-center">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
  </div>
  <p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
  <div class="flex justify-between items-center mt-6">
    <div class="flex space-x-4">
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
      <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </div>
    <span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
  </div>
</div>

Social Components Component

Social Components Component with Brutalism design, responsive effects, and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-2xl font-bold font-mono">Social Feed</h2>
    <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
  </div>
  <div class="space-y-6">
    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">John Doe</p>
          <p class="text-sm font-mono">@johndoe</p>
        </div>
      </div>
      <p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
      <img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 100</span>
        <span>Comments: 20</span>
      </div>
    </div>

    <div class="border-2 border-black dark:border-white p-4">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
        <div class="ml-4">
          <p class="font-bold font-mono">Jane Smith</p>
          <p class="text-sm font-mono">@janesmith</p>
        </div>
      </div>
      <p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
      <div class="flex justify-between mt-4 font-mono">
        <span>Likes: 50</span>
        <span>Comments: 15</span>
      </div>
    </div>
  </div>
</div>

Categories