Search Components

Social Share Buttons

Buttons for sharing content to social media

Social Share Buttons Component

A clean, minimalist social share component for finance/banking interfaces, featuring black, white, and an accent color, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 font-sans">

  <div class="max-w-md mx-auto bg-gray-50 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">Share this Investment Opportunity</h2>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-6">
        Help your network discover potential growth. Share this page with colleagues, friends, or family.
      </p>

      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

        <!-- Share Button: LinkedIn -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-600 dark:hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M17 6H6C4.34 6 3 7.34 3 9v6c0 1.66 1.34 3 3 3h11c1.66 0 3-1.34 3-3V9c0-1.66-1.34-3-3-3zM8 15V9h2v6H8zm-3-6a2 2 0 100-4 2 2 0 000 4zm0 2c-1.33 0-2.45.65-3.1 1.6S3.07 16 4.33 16h1.34c1.26 0 2.38-.65 3.03-1.6S9.12 11 7.85 11h-1.6zm13-4v12a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h11.23A3.77 3.77 0 0021 9v6a3.77 3.77 0 00-3.77 3.77V13z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">LinkedIn</span>
        </a>

        <!-- Share Button: Twitter -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-400 hover:border-blue-400 dark:hover:bg-blue-400 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.83.49-1.75.83-2.72 1.02-1.95-2.09-5.18-2.09-7.14 0C5.16 7.4 3.66 9.8 3.5 12.28c-3.13-.16-5.9-1.66-7.76-3.8c-.33.57-.5 1.23-.5 1.95 0 1.34.68 2.52 1.7 3.22-.63-.02-1.22-.2-1.72-.47v.03c0 2.45 1.63 4.48 3.78 4.96-.4.1-.82.15-1.26.15-.3 0-.58-.03-.86-.08.6 1.87 2.34 3.24 4.4 3.28C4.5 20.89 2.7 21.5 0 21.5c-1.34 0-2.6-.08-3.8-.25 2.1 1.34 4.5 2.1 7.1 2.1 8.5 0 13.14-7.07 13.14-13.14 0-.19 0-.37-.01-.56.9-.65 1.7-1.47 2.32-2.4z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Twitter</span>
        </a>

        <!-- Share Button: Facebook -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-blue-700 hover:border-blue-700 dark:hover:bg-blue-700 dark:hover:border-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.2 6 14 6c1.34 0 2.5.21 2.5.21V9h-1.34c-1.32 0-1.74.82-1.74 1.66V12h3.95l-.63 3h-3.32V21.8C18.56 20.87 22 16.84 22 12z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Facebook</span>
        </a>

        <!-- Share Button: WhatsApp -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-green-500 hover:border-green-500 dark:hover:bg-green-500 dark:hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.04 2C6.59 2 2.13 6.45 2.13 11.9S6.59 21.8 12.04 21.8c.01 0 .02 0 .03 0a9.8 9.8 0 005.83-1.89l1.45.5 1.5-1.5a10 10 0 001.89-5.8c0-.01 0-.02 0-.03C21.95 6.45 17.5 2 12.04 2zM17 15.6l-.3.2c-1.8 1.1-4.7.9-6.3-.5-.4-.3-.7-.6-.9-1.2-.2-.5-.3-1-.3-1.6-.2-1.3.3-2.6 1.4-3.7.8-.8 1.9-1.3 3.2-1.3.7 0 1.3.2 1.8.4.5.3 1 .7 1.3 1.2.3.5.4 1 .4 1.6-.1.6-.2 1.1-.3 1.7-.1.5-.3.9-.6 1.3-.3.4-.6.6-1 .8-.4.2-.8.3-1.2.3-.4 0-.8-.1-1.2-.2-.4-.1-.7-.3-1-.5-.3-.2-.5-.4-.7-.7-.2-.3-.3-.6-.3-1 .1-.4.2-.7.4-1 .2-.3.5-.5.8-.7.3-.2.6-.3.9-.4.3-.1.6-.1.9-.1.2 0 .4 0 .6.1.2 0 .4.1.5.2.2.1.3.2.4.4.1.2.1.4.1.6 0 .3 0 .5-.1.7-.1.2-.2.4-.4.6-.2.2-.4.4-.6.5-.2.2-.5.3-.8.4-.3.1-.6.1-.9.1-.3 0-.6-.1-.9-.2-.3-.1-.5-.3-.8-.5-.3-.2-.5-.4-.7-.7-.2-.3-.4-.6-.5-.9-.1-.3-.2-.6-.2-.9.2-.9.5-1.5 1-2 .5-.5 1-1 1.6-1.5.6-.5 1.2-1 1.7-1.5.5-.5 1-1 1.4-1.5.4-.5.7-1 1-1.6.3-.5.4-1 .4-1.6 0-.6-.1-1.2-.4-1.7-.3-.5-.7-.9-1.2-1.3-.5-.4-1.1-.7-1.8-.8-.7-.2-1.4-.2-2.1-.2-.7 0-1.3 0-1.9.1-.6.1-1.1.3-1.6.5-.5.2-.9.5-1.3.8-.4.3-.8.7-1.1 1.1-.3.4-.5.9-.6 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3.4.4.8.7 1.2 1.1.4.3.8.6 1.2.8.4.2.8.4 1.2.5.4.1.9.2 1.3.2.5 0 .9-.1 1.4-.2.5-.1 1-.3 1.4-.5.4-.2.8-.5 1.1-.8.4-.4.7-.7 1-1.1.3-.4.6-.9.7-1.4.1-.5.2-1 .2-1.6 0-.6-.1-1.2-.3-1.7-.2-.5-.5-.9-.8-1.3-.3-.4-.6-.7-1-1.1-.4-.4-.8-.7-1.1-1.1-.4-.3-.8-.6-1.2-.8-.4-.2-.8-.4-1.2-.5-.4-.1-.9-.2-1.3-.2-.5 0-.9.1-1.4.2-.5.1-1 .3-1.4.5-.4.2-.8.5-1.1.8-.4.4-.7.7-1 1.1-.3.4-.6.9-.7 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3s.8.7 1.2 1c.4.3.8.6 1.2.8.4.2.8.4 1.3.5.4.1.9.2 1.3.2.5 0 .9-.1 1.4-.2.5-.1 1-.3 1.4-.5.4-.2.8-.5 1.1-.8.4-.4.7-.7 1-1.1.3-.4.6-.9.7-1.4.1-.5.2-1 .2-1.6 0-.6-.1-1.2-.3-1.7-.2-.5-.5-.9-.8-1.3-.3-.4-.6-.7-1-1.1-.4-.4-.8-.7-1.1-1.1-.4-.3-.8-.6-1.2-.8-.4-.2-.8-.4-1.2-.5-.4-.1-.9-.2-1.3-.2-.5 0-.9.1-1.4.2-.5.1-1 .3-1.4.5-.4.2-.8.5-1.1.8-.4.4-.7.7-1 1.1-.3.4-.6.9-.7 1.4-.1.5-.2 1-.2 1.6 0 .7.1 1.3.3 1.9.2.6.4 1.2.7 1.7.3.5.7 1 1 1.4.3.5.7.9 1.1 1.3S17 15.6 17 15.6z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">WhatsApp</span>
        </a>

        <!-- Share Button: Email -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-red-500 hover:border-red-500 dark:hover:bg-red-500 dark:hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Email</span>
        </a>

        <!-- Share Button: Copy Link -->
        <button class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg cursor-pointer transition-all duration-200
          hover:bg-purple-600 hover:border-purple-600 dark:hover:bg-purple-600 dark:hover:border-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M17 7h-4a1 1 0 000 2h4a1 1 0 000-2zm-3 4h4a1 1 0 000-2h-4a1 1 0 000 2zM7 7a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V8a1 1 0 00-1-1H7zm11 11H8V9h10v9zm-2-12v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2c-2.206 0-4 1.794-4 4v8c0 2.206 1.794 4 4 4h12c2.206 0 4-1.794 4-4V12c0-2.206-1.794-4-4-4z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">Copy Link</span>
        </button>

        <!-- Share Button: More Options (could open a modal/dropdown with JS) -->
        <a href="#" class="group flex flex-col items-center justify-center p-3 border border-gray-200 dark:border-gray-700 rounded-lg transition-all duration-200
          hover:bg-gray-600 hover:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="w-6 h-6 text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200 mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
          </svg>
          <span class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-white transition-colors duration-200">More</span>
        </a>

      </div>
    </div>

    <div class="p-6 pt-4 sm:p-8 sm:pt-4 border-t border-gray-200 dark:border-gray-700">
      <p class="text-xs text-gray-500 dark:text-gray-400 text-center">
        Your privacy is important to us. Sharing this content does not share your personal information.
      </p>
    </div>

  </div>
</div>

Playful_Pastel_Social_Share_Buttons_for_Booking

A complex, playful and fun social share buttons component with a pastel color scheme, suitable for booking and reservation systems. Features rounded elements, cheerful aesthetics, full responsiveness, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <!-- Share Component Container -->
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl hover:scale-105">
    
    <!-- Header -->
    <div class="text-center space-y-2">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-purple-600 dark:text-purple-300 tracking-tight leading-tight">
        Booked! Share the Joy!
      </h2>
      <p class="text-gray-500 dark:text-gray-300 text-lg sm:text-xl">
        Your appointment is confirmed. Let friends know!
      </p>
    </div>

    <!-- Share Link Section -->
    <div class="bg-purple-100 dark:bg-gray-600 rounded-2xl p-4 sm:p-5 flex flex-col items-center space-y-3">
      <p class="text-purple-700 dark:text-purple-200 font-semibold text-center text-sm sm:text-base">Your unique booking link:</p>
      <div class="relative w-full">
        <input type="text" readonly value="https://booking.example.com/your-booking-id" class="w-full pl-4 pr-12 py-3 rounded-xl bg-purple-50 dark:bg-gray-500 text-purple-800 dark:text-purple-50 font-mono text-sm sm:text-base border-2 border-purple-200 dark:border-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 transition-all duration-200" aria-label="Booking link">
        <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-purple-400 hover:bg-purple-500 dark:bg-purple-600 dark:hover:bg-purple-700 text-white p-2 rounded-lg transition-colors duration-200 group" aria-label="Copy link button">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.414-1.414A1 1 0 0012.586 3H12V2a1 1 0 10-2 0v1H8z"></path>
          </svg>
          <span class="sr-only group-hover:not-sr-only group-hover:flex absolute right-full top-1/2 -translate-y-1/2 mr-2 bg-gray-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">Copied!</span>
        </button>
      </div>
    </div>
    
    <!-- Social Share Buttons Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
      
      <!-- Facebook -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-100 dark:bg-blue-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on Facebook">
        <div class="w-12 h-12 bg-blue-400 dark:bg-blue-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="mt-2 text-blue-800 dark:text-blue-100 font-semibold text-sm sm:text-base">Facebook</span>
      </a>

      <!-- Twitter/X -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-sky-100 dark:bg-sky-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on X/Twitter">
        <div class="w-12 h-12 bg-sky-400 dark:bg-sky-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.797 11.24h-6.768L9.58 13.298 2.25 22H.921l8.326-9.59L.75 2.25H8.08L12 8.314 18.244 2.25zM17.29 20l-1.153-1.32h-1.92L16.29 20H17.29zM4.25 4l-1.153 1.32h1.92L4.25 4zm13.398 1.168L15.3 18.84h2.098L19.348 4.678h-2.098z" />
          </svg>
        </div>
        <span class="mt-2 text-sky-800 dark:text-sky-100 font-semibold text-sm sm:text-base">X/Twitter</span>
      </a>

      <!-- WhatsApp -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-green-100 dark:bg-green-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on WhatsApp">
        <div class="w-12 h-12 bg-green-400 dark:bg-green-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.7.46 3.32 1.36 4.77L2.05 22l5.02-1.32c1.3-.76 2.76-1.17 4.29-1.17h.03c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm5.8 14.24c-.2.33-.8.63-1.16.8-.31.13-.69.2-.95.27-.26.08-.5.14-.73.17-.49.07-1.1-.06-1.63-.33-.5-.26-1.13-.67-1.74-1.25-.61-.57-1.12-1.28-1.5-2-.32-.6-.27-.92-.18-1.1S8.57 11.84 8.2 11.4c-.4-.44-.82-1-.07-1.46.64-.42 1.13.06 1.48.51.34.45.6.93.83 1.43.23.5.38.8.62 1.05.24.25.47.37.76.5.3.12.57.1.8-.02.2-.1.6-1.07.89-1.37.29-.3.5-1.04.2-1.42-.26-.37-.77-.66-1.06-.92-.29-.26-.6-.61-.5-.8C9.65 8.9 12.08 7.37 12.4 7.22c.32-.15.65-.24.98-.21.32.02.66.07.95.14.29.08.57.2.82.35.26.16.48.37.66.58.2.22.39.49.52.79.14.3.29.62.3 1.08.01.55-.38 1.54-.74 2.05-.36.5-1.29 1.77-1.7 2.11z" />
          </svg>
        </div>
        <span class="mt-2 text-green-800 dark:text-green-100 font-semibold text-sm sm:text-base">WhatsApp</span>
      </a>

      <!-- Email -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-red-100 dark:bg-red-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share via Email">
        <div class="w-12 h-12 bg-red-400 dark:bg-red-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.58 6.44a3 3 0 01-3.44 0L1.5 8.67z" />
            <path d="M22.5 6.55L14.73 0 12 2.29 9.27 0 1.5 6.55v.62a3 3 0 00.86 1.83L12 17.06l9.64-8.06a3 3 0 00.86-1.83V6.55z" />
          </svg>
        </div>
        <span class="mt-2 text-red-800 dark:text-red-100 font-semibold text-sm sm:text-base">Email</span>
      </a>

      <!-- LinkedIn -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-blue-50 dark:bg-blue-900 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="Share on LinkedIn">
        <div class="w-12 h-12 bg-blue-300 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
          </svg>
        </div>
        <span class="mt-2 text-blue-700 dark:text-blue-100 font-semibold text-sm sm:text-base">LinkedIn</span>
      </a>

      <!-- More Options -->
      <a href="#" class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-800 rounded-2xl transform transition-all duration-200 hover:scale-105 hover:shadow-md group" aria-label="More sharing options">
        <div class="w-12 h-12 bg-gray-400 dark:bg-gray-600 rounded-full flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform duration-300">
          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7 6H5v12h2V6zm8.659 3l-1.394 6H13.62L15 9h-2.341l-1.394 6h-1.63L11 9H8V8h4l1.341 6h1.63L15 8h-2.341l1.394-6H16l1.341 6h-2.341l-1.394-6h-1.63L13 2H8L7.029 6H5v12h2V6h1.62l1.394-6H13.727l1.394 6h1.63L17 22h-1.63z" clip-rule="evenodd" />
            <circle cx="19" cy="12" r="2" />
          </svg>
        </div>
        <span class="mt-2 text-gray-800 dark:text-gray-100 font-semibold text-sm sm:text-base">More...</span>
      </a>

    </div>

  </div>
</div>

Social Share Buttons Component

A simple, responsive, 3D grayscale social share button component for dashboards with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

Social Share Buttons Component

A retro/vintage social share buttons component with a monochromatic color scheme. It is a complex, responsive design with dark theme support, suitable for a portfolio. Uses Tailwind CSS with no JavaScript.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
    <div class="grid grid-cols-2 gap-4">
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Twitter</span>
      </a>
      <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
        <span>Facebook</span>
      </a>
      <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>YouTube</span>
      </a>
      <a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Instagram</span>
      </a>
      <a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>GitHub</span>
      </a>
      <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

Social Share Buttons Component

Social Share Buttons Component with microinteractions, grayscale color scheme, moderate complexity for social media interfaces, responsive design with dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 rounded-lg shadow-lg bg-white dark:bg-gray-800">

    <!-- Facebook Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 13.5H16.5L17.5 9.5H14V6.5C14 5.48473 14.156 5.24436 14.6293 4.96695C15.1027 4.68953 15.6568 4.5 16.0357 4.5H17.5V0.849C17.2023 0.816436 16.2943 0.75 15.1633 0.75C12.8711 0.75 11.2335 2.1265 11.2335 4.88457V9.5H8.5V13.5H11.2335V23.25H14V13.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-400 dark:hover:bg-blue-500 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M22.46 6C21.64 6.36 20.76 6.61 19.86 6.74C20.79 6.18 21.46 5.34 21.82 4.3C20.93 4.84 19.98 5.22 18.96 5.43C18.13 4.56 16.92 4 15.58 4C12.87 4 10.63 6.22 10.63 8.94C10.63 9.38 10.68 9.8 10.79 10.2C7.38 8.44 5.02 5.56 3.4 2.5C2.97 3.24 2.76 4.08 2.76 4.95C2.76 6.7 3.69 8.27 5.16 9.19C4.31 9.17 3.49 8.93 2.76 8.5V8.5C2.76 10.87 4.41 12.87 6.64 13.33C6.22 13.44 5.79 13.49 5.35 13.49C5.04 13.49 4.74 13.46 4.44 13.39C5.07 15.34 6.89 16.82 9.08 16.86C7.3 18.23 5.08 19.06 2.76 19.06C2.37 19.06 1.99 19.04 1.62 18.99C3.84 20.44 6.47 21.25 9.28 21.25C15.55 21.25 19.02 15.93 19.02 11.2V10.7C19.68 10.15 20.26 9.5 20.74 8.78C20.1 9.15 19.4 9.4 18.66 9.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-400 dark:bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20.447 20.452H15.962V13.816C15.962 12.181 15.207 11.018 13.731 11.018C12.585 11.018 11.859 11.83 11.531 12.639C11.406 12.946 11.378 13.342 11.378 13.738V20.452H6.941V6.993H11.378V8.922C11.968 7.822 13.076 6.782 15.226 6.782C18.175 6.782 20.447 8.653 20.447 13.382V20.452ZM2.542 4.792C1.144 4.792 0 3.714 0 2.436C0 1.159 1.144 0.081 2.542 0.081C3.898 0.081 5.042 1.159 5.042 2.436C5.042 3.714 3.898 4.792 2.542 4.792ZM4.721 20.452H0.285V6.993H4.721V20.452Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-700 dark:bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-pink-600 dark:hover:bg-pink-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C8.686 2 8.257 2.012 6.974 2.07C5.69 2.128 4.734 2.378 3.89 2.709C2.96 3.067 2.185 3.655 1.54 4.298C0.898 4.94 0.312 5.714 0.003 6.645C-0.08 7.042 -0.009 7.439 0 7.836V16.164C0.009 16.561 0.08 16.958 0.003 17.355C0.312 18.286 0.898 19.06 1.54 19.702C2.185 20.345 2.96 20.933 3.89 21.291C4.734 21.622 5.69 21.872 6.974 21.93C8.257 21.988 8.686 22 12 22C15.314 22 15.743 21.988 17.026 21.93C18.31 21.872 19.266 21.622 20.11 21.291C21.04 20.933 21.815 20.345 22.46 19.702C23.102 19.06 23.688 18.286 23.997 17.355C24.08 16.958 24.009 16.561 24 16.164V7.836C24.009 7.439 24.08 7.042 23.997 6.645C23.688 5.714 23.102 4.94 22.46 4.298C21.815 3.655 21.04 3.067 20.11 2.709C19.266 2.378 18.31 2.128 17.026 2.07C15.743 2.012 15.314 2 12 2ZM12 4C15.289 4 15.69 4.013 16.93 4.068C18.152 4.123 18.784 4.303 19.262 4.475C19.742 4.647 20.082 4.887 20.407 5.212C20.732 5.537 20.972 5.877 21.144 6.357C21.316 6.835 21.496 7.468 21.551 8.69C21.606 9.932 21.619 10.332 21.619 12C21.619 13.668 21.606 14.068 21.551 15.308C21.496 16.53 21.316 17.162 21.144 17.64C20.972 18.118 20.732 18.458 20.407 18.783C20.082 19.108 19.742 19.348 19.262 19.52C18.784 19.692 18.152 19.872 16.93 19.927C15.69 19.982 15.289 19.995 12 19.995C8.711 19.995 8.31 19.982 7.07 19.927C5.848 19.872 5.216 19.692 4.738 19.52C4.258 19.348 3.918 19.108 3.593 18.783C3.268 18.458 3.028 18.118 2.856 17.64C2.684 17.162 2.504 16.53 2.449 15.308C2.394 14.068 2.381 13.668 2.381 12C2.381 10.332 2.394 9.932 2.449 8.69C2.504 7.468 2.684 6.835 2.856 6.357C3.028 5.877 3.268 5.537 3.593 5.212C3.918 4.887 4.258 4.647 4.738 4.475C5.216 4.303 5.848 4.123 7.07 4.068C8.31 4.013 8.711 4 12 4ZM12 8C9.791 8 8 9.791 8 12C8 14.209 9.791 16 12 16C14.209 16 16 14.209 16 12C16 9.791 14.209 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14ZM18.529 6.27C18.125 6.27 17.79 5.935 17.79 5.531C17.79 5.127 18.125 4.792 18.529 4.792C18.933 4.792 19.268 5.127 19.268 5.531C19.268 5.935 18.933 6.27 18.529 6.27Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-pink-500 dark:bg-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

  </div>
</div>

Social Share Buttons Component

A minimalist social share buttons component designed for dashboards, featuring a vibrant color scheme and responsive design, with dark mode support.

Open Preview

                <div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

Social Share Buttons Component

A responsive social share buttons component designed in a glassmorphism style with a monochromatic color scheme for e-commerce sites. It features frosted glass-like translucent elements, includes multiple interactive buttons for sharing on social media, and has dark mode support using Tailwind CSS.

Open Preview

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

Social Share Buttons

Responsive social share buttons component with dark theme support, brutalist design, analogous color scheme, and complex interactions, built with Tailwind CSS for a portfolio website.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

    <!-- Social Share Button 1 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-yellow-500 text-3xl">
          <i class="fab fa-twitter"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
          <p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Tweet
      </button>
    </div>

    <!-- Social Share Button 2 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-orange-500 text-3xl">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
          <p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Share
      </button>
    </div>

    <!-- Social Share Button 3 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-red-500 text-3xl">
          <i class="fab fa-pinterest-p"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
          <p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Pin It
      </button>
    </div>

    <!-- Social Share Button 4 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-blue-500 text-3xl">
          <i class="fab fa-linkedin-in"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
          <p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Connect
      </button>
    </div>

  </div>
</div>

Social Share Buttons Component

Responsive Social Share Buttons with Glassmorphism style and vibrant colors, designed for blogs and content consumption.

Open Preview

                <div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

Skeuomorphic Earth Tone Social Share Buttons

A set of social share buttons styled in a Skeuomorphic design using earth tones. Features include responsive layout and dark mode support with interactive press effects on hover, built purely with HTML and Tailwind CSS classes.

Open Preview

                <div class="flex justify-center p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="flex space-x-4 md:space-x-6 flex-wrap justify-center w-full max-w-lg gap-y-4">

    <!-- Facebook Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Facebook">
       <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.691v-3.621h3.129V8.41c0-3.11 1.893-4.82 4.66-4.82 1.314 0 2.417.097 2.745.141v3.208h-1.949c-1.534 0-1.841.724-1.841 1.793v2.358h3.56L19.524 14.71h-3.154V24h6.294c0.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Twitter">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.716 11.492H16.35l-5.21-6.893L6.66 21.75H3.34l8.495-9.52-8.046-9.488h7.56zm-.493 1.374L5.207 21.02h3.75l9.138-12.874h-7.81z"/></svg>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Instagram">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C8.74 0 8.333.014 7.053.072 5.775.132 4.9.333 4.073.668c-.844.331-1.592.726-2.34 1.473S.998 3.228.668 4.073c-.333.836-.534 1.701-.592 2.98-.058 1.28-.072 1.69-.072 4.9s.014 3.62.072 4.9c.058 1.278.259 2.144.592 2.977.33.844.726 1.592 1.473 2.34s1.5.998 2.34 1.473c.835.331 1.7.534 2.978.592 1.28.058 1.689.072 4.9.072s3.62.014 4.9-.072c1.277-.058 2.144-.259 2.977-.592.844-.33 1.592-.726 2.34-1.473s.998-1.5 1.473-2.34c.331-.836.534-1.7.592-2.977.058-1.28.072-1.69.072-4.9s-.014-3.62-.072-4.9c-.058-1.278-.259-2.144-.592-2.977-.33-.844-.726-1.592-1.473-2.34S20.772.998 19.927.668c-.835-.333-1.7-.534-2.978-.592C16.38.014 15.97.001 12 0zm0 2.16c3.203 0 3.585.016 4.85.074 1.05.049 1.791.217 2.41.465.639.254 1.129.596 1.597 1.064s.81 1.007 1.063 1.645c.248.62.416 1.36.465 2.41.058 1.264.074 1.646.074 4.85s-.016 3.585-.074 4.85c-.049 1.05-.217 1.791-.465 2.41-.254.639-.596 1.129-1.064 1.597s-1.007.81-1.645 1.063c-.62.248-1.36.416-2.41.465-1.264.058-1.646.074-4.85.074s-3.585-.016-4.85-.074c-1.05-.049-1.791-.217-2.41-.465-.639-.254-1.129-.596-1.597-1.064s-.81-1.007-1.063-1.645c-.248-.62-.416-1.36-.465-2.41C2.16 15.585 2.14 15.203 2.14 12s.016-3.585.074-4.85c.049-1.05.217-1.791.465-2.41.254-.639.596-1.129 1.064-1.597S3.29 3.361 3.929 3.106c.62-.248 1.36-.416 2.41-.465C8.414 2.16 8.796 2.14 12 2.14zm0 3.615a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 2.16a2.34 2.34 0 1 1 0 4.68 2.34 2.34 0 0 1 0-4.68z"/></svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on LinkedIn">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302zM3.633 7.514c-1.002-.02-1.28.737-1.28 1.618c0 .88.282 1.617 1.28 1.637c.998.02 1.28-.737 1.28-1.617c0-.88-.282-1.618-1.28-1.638zm-.013-2.5c-1.328 0-2.158.891-2.158 2.035c0 1.143.83 2.035 2.148 2.035c1.328 0 2.157-.891 2.157-2.035c-.014-1.144-.83-2.035-2.147-2.035h.01zM6.88 20.452H3.633V11h3.25zm14.104 0h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302z"/></svg>
    </a>

  </div>
</div>

Search Components

Categories

Social Share Buttons