Social Share

A social media showcase

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Social media links,

Button Social media buttons

Author Rajesh Maheshwari

Tailwind v3.4 1.7k 2

Fork Fullscreen

<section class="py-20 bg-gradient-to-b from-[#121212] to-purple-800 md:px-20 lg:px-20">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-bold text-white mb-4 section-title" data-aos="fade-down">
        Follow Our Journey
      </h2>
      <p class="text-gray-300 max-w-2xl mx-auto" data-aos="fade-down">
        Discover our latest captures and behind-the-scenes moments on our
        social media channels. Join our community of photography
        enthusiasts!
      </p>
    </div>

<div class="flex flex-col sm:flex-row justify-center items-center gap-6" data-aos="fade-up">
      
      <a
        href="#"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center gap-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white py-3 px-8 rounded-full hover:from-pink-600 hover:to-purple-600 transition duration-900 ease-in-out shadow-lg hover:shadow-xl"
      >
        
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2a10 10 0 11-10 10 10 10 0 0110-10zm0 14a4 4 0 100-8 4 4 0 000 8zm4-8a4 4 0 10-8 0 4 4 0 008 0z" />
        </svg>
        <span>Follow on Instagram</span>
      </a>

<a
        href="#"
        target="_blank"
        rel="noopener noreferrer"
        class="flex items-center justify-center gap-2 bg-gradient-to-r from-red-600 to-black text-white py-3 px-8 rounded-full hover:from-black hover:to-red-600 transition duration-900 ease-in-out shadow-lg hover:shadow-xl"
      >
        
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 12l-6 4V8l6 4zm8 0l-6 4V8l6 4z" />
        </svg>
        <span>Subscribe on YouTube</span>
      </a>
    </div>
  </div>
</section>