Social Share Buttons 구성 요소

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