Stacked pill buttons with inset border and hover effect

This component uses Tailwind CSS utilities to create a stacked pair of pill buttons with a 1px inset border and ring. The buttons have 16px of horizontal padding, 12px of vertical padding, 14px font size, 600 font weight, and use Tailwind's default sans-serif font. On hover, the background changes to a subtle gray (#f9fafb) for a clean hover effect. The left button has rounded corners on the left side, while the right button has rounded corners on the right side. An -ml-px negative margin on the right button eliminates the border between the two. This creates a simple, minimalist pill button pair that could be used for like/dislike, bookmarking, voting, or other binary actions.

Similar Components

Other components related to buttons, pill buttons, stacked buttons, hover effect, inset border, rounded corners tags