Buttons 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 bg-white dark:bg-gray-900 shadow-lg rounded-lg max-w-4xl">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 text-gray-900 dark:text-white">Action Buttons</h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Primary Button (Text) -->
      <button class="w-full py-3 px-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-800">
        Primary Action
      </button>

      <!-- Secondary Button (Text) -->
      <button class="w-full py-3 px-6 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
        Secondary Action
      </button>

      <!-- Outline Button -->
      <button class="w-full py-3 px-6 border border-gray-400 hover:border-blue-600 text-gray-700 hover:text-blue-600 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200
                     dark:border-gray-600 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:text-blue-500 dark:focus:ring-gray-700">
        Outline Button
      </button>

      <!-- Ghost Button -->
      <button class="w-full py-3 px-6 text-blue-600 hover:text-blue-800 font-semibold rounded-lg transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-blue-100 dark:text-blue-500 dark:hover:text-blue-400 dark:focus:ring-blue-900">
        Ghost Button
      </button>

      <!-- Destructive Button -->
      <button class="w-full py-3 px-6 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-md transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-800">
        Delete Account
      </button>

      <!-- Disabled Button -->
      <button disabled class="w-full py-3 px-6 bg-gray-300 text-gray-500 font-semibold rounded-lg cursor-not-allowed
                   dark:bg-gray-700 dark:text-gray-500">
        Disabled Button
      </button>

      <!-- Button with Icon (Left) -->
      <button class="w-full py-3 px-6 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-800">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        <span>Add Item</span>
      </button>

      <!-- Button with Icon (Right) -->
      <button class="w-full py-3 px-6 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg shadow-md flex items-center justify-center space-x-2 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:bg-yellow-600 dark:text-gray-900 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800">
        <span>Next Step</span>
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
        </svg>
      </button>

      <!-- Segmented Buttons / Toggle Group -->
      <div class="col-span-1 md:col-span-2 lg:col-span-1 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm overflow-hidden border border-gray-300 dark:border-gray-700">
          <button class="py-3 px-6 bg-blue-600 text-white font-semibold flex-1 rounded-l-lg
                         dark:bg-blue-700">
            Month
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 border-x border-gray-300
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300 dark:border-gray-700">
            Week
          </button>
          <button class="py-3 px-6 bg-white hover:bg-gray-100 text-gray-700 font-semibold flex-1 rounded-r-lg
                         dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-300">
            Day
          </button>
        </div>
      </div>

      <!-- Icon Button (Round) -->
      <button aria-label="Settings" class="w-12 h-12 bg-gray-300 hover:bg-gray-400 text-gray-700 font-semibold rounded-full shadow-md flex items-center justify-center transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 dark:focus:ring-gray-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
      </button>

      <!-- Floating Action Button (FAB) -->
      <button aria-label="Add New" class="fixed bottom-8 right-8 w-14 h-14 bg-pink-600 hover:bg-pink-700 text-white rounded-full shadow-lg flex items-center justify-center transform hover:scale-105 transition-all duration-300 ease-in-out
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:bg-pink-700 dark:hover:bg-pink-800 dark:focus:ring-pink-800">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
      </button>
    </div>
  </div>
</div>