Button Outline

                    <!-- Primary Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-blue-600 bg-transparent border border-blue-600 rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors">
  Primary
</button>

<!-- Secondary Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-purple-600 bg-transparent border border-purple-600 rounded-lg hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-colors">
  Secondary
</button>

<!-- Success Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-green-600 bg-transparent border border-green-600 rounded-lg hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors">
  Success
</button>

<!-- Danger Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-red-600 bg-transparent border border-red-600 rounded-lg hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors">
  Danger
</button>

<!-- Warning Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-yellow-600 bg-transparent border border-yellow-600 rounded-lg hover:bg-yellow-50 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 transition-colors">
  Warning
</button>

<!-- Info Outline Button -->
<button class="inline-flex items-center justify-center px-4 py-2 font-medium text-sky-500 bg-transparent border border-sky-500 rounded-lg hover:bg-sky-50 focus:outline-none focus:ring-2 focus:ring-sky-400 focus:ring-opacity-50 transition-colors">
  Info
</button>