いいね/リアクションボタン

                <div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center space-x-2">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-900 dark:text-white">Like</span>
    </div>
    <button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
        <span class="material-icons"> thumb_up </span>
    </button>
    <button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
        <span class="material-icons"> favorite </span>
    </button>
    <button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
        <span class="material-icons"> sentiment_satisfied </span>
    </button>
</div>

<style>
    /* Add Material Icons font link */
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>
              

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
        <div class="flex space-x-4">
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
            </button>
            <button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
                <img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
                <span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
            </button>
        </div>
    </div>
</div>