ソーシャル共有ボタンコンポーネント

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