Button Block
<!-- Full Width Button -->
<button class="w-full inline-flex items-center justify-center px-4 py-2 font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors">
Full Width Button
</button>
<!-- Responsive Block Button (Full width on mobile, auto on larger screens) -->
<button class="w-full md:w-auto inline-flex items-center justify-center px-4 py-2 font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition-colors mt-4">
Responsive Block Button
</button>
<!-- Fixed Width Button -->
<button class="w-48 inline-flex items-center justify-center px-4 py-2 font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-colors mt-4">
Fixed Width (12rem)
</button>
Copied to clipboard