Social Share Buttons 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-900 font-sans min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full p-4 sm:p-6 md:p-8 rounded-lg shadow-lg relative overflow-hidden
              bg-gradient-to-br from-gray-100 to-white dark:from-gray-800 dark:to-gray-950
              border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Geometric shapes) -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-blue-200 dark:bg-blue-800 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gray-300 dark:bg-gray-700 transform skew-x-12 opacity-60"></div>
    <div class="absolute top-1/4 left-1/4 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full opacity-50"></div>

    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-6 relative z-10 text-center">
      Share This Content
    </h3>

    <div class="flex flex-wrap gap-3 sm:gap-4 justify-center relative z-10">

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         aria-label="Share on Facebook">
        <svg class="w-6 h-6 sm:w-7 sm: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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-75"
         aria-label="Share on Twitter">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-1.04-.614-2.185-1.002-3.425-1.229a4.958 4.958 0 00-8.467 4.549 14.025 14.025 0 01-10.139-5.127 4.958 4.958 0 001.523 6.696c-.965-.034-1.871-.295-2.673-.737v.063a4.958 4.958 0 003.945 4.862 4.995 4.995 0 01-2.22-.088 4.93 4.93 0 004.604 3.447 9.956 9.956 0 01-6.102 2.105c-.39-.023-.777-.048-1.164-.079A13.95 13.95 0 0014 20.443c6.367 0 9.33-5.227 9.33-9.743 0-.15-.003-.298-.009-.446A16.974 16.974 0 0024 4.57z">
          </path>
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
         aria-label="Share on Pinterest">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10c5.236 0 9.53-4.043 9.933-9.183.042-.5-.192-.937-.64-.997s-.887.182-1.383.568c-1.082.827-2.347 1.488-3.79 1.488-2.617 0-4.733-2.115-4.733-4.73C7.437 6.478 9.92 4 12 4c2.204 0 3.993 1.637 4.542 3.82.046.192.203.255.45.187.247-.068.397-.245.474-.473.55-1.633.374-3.568-1.002-4.998C15.42 2.628 13.785 2 12 2ZM8.736 10.963c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.895 4.07c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm5.626-2.222c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.787 4.148c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-2.738-2.58c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-gray-700 hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-600 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75"
         aria-label="Share via Email">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M1.5 8.67a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 8.67v7.66A2.25 2.25 0 0120.25 18.5H3.75A2.25 2.25 0 011.5 16.33v-7.66zM1.5 9.75v-.88A2.25 2.25 0 013.75 6H20.25A2.25 2.25 0 0122.5 8.87v.88H1.5z" />
          <path d="M22.5 9.75c0-.44-.36-.75-.75-.75H2.25c-.39 0-.75.31-.75.75v.75l10.5 5.5s10.5-5.5 10.5-5.5V9.75z" />
        </svg>
      </a>

    </div>

  </div>
</div>