Buttons with Responsive Padding

This component demonstrates how to create responsive buttons with Tailwind CSS. It uses the rounded-full, bg-indigo-600, text-white, shadow-sm, and hover:bg-indigo-500 classes to style the buttons. The p-1, p-1.5, and p-2 classes are used to control the padding responsively. As the viewport size changes, the padding will smoothly transition between 1rem, 1.5rem, and 2rem padding. The focus-visible classes add a visible outline on focus for accessibility.