Like-/Reaction-Schaltflächen

<div class="flex items-center justify-center space-x-4 p-4 bg-gray-200 dark:bg-gray-800">
  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 rounded-full bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition duration-300 ease-in-out">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
      <path d="M10 2a6 6 0 00-6 6v3.586l1.707 1.707A3 3 0 017 14h6a3 3 0 012.293.707L16 11.586V8a6 6 0 00-6-6zM12 15.5a1 1 0 100 2h-4a1 1 0 100 2H7a1 1 0 100 2h6a3 3 0 003-3v-6a3 3 0 00-3-3h-2l-.45.45A4 4 0 0111 14H9a4 4 0 01-1.55-.45L7 13V8a4 4 0 014-4h2a4 4 0 014 4v6a4 4 0 01-4 4h-6.5a1.5 1.5 0 00-1.06.44L4 17.5V15a1 1 0 00-1-1h-.5a1.5 1.5 0 000 3H3v.5a1.5 1.5 0 001.5 1.5h8.086a2.5 2.5 0 011.768.732L15 20.5V21h1a1 1 0 100-2h-1v-.5a1.5 1.5 0 00-1.5-1.5z" />
    </svg>
    <span>React</span>
  </button>

</div>