Build a modular, headless-inspired button component using React and Tailwind CSS. The component should leverage a flexible pattern that separates the underlying interaction logic from the visual presentation, allowing for custom rendering based on state.

**Layout and Structure:**
The component must be built as a reusable wrapper that accepts children and a render prop. It should expose internal component states—specifically `isPressed`, `isHovered`, and `isFocused`—to a custom render function. This allows the consumer to define the DOM structure and styling dynamically based on the interaction state.

**Visual Style and Design:**
- Use a clean, modern aesthetic with generous padding and subtle border radii.
- Implement a clear contrast between the default state and the active/pressed state.
- Ensure the typography is sans-serif, legible, and balanced within the button container.
- Use a refined color palette (e.g., slate grays or primary blues) with smooth transitions for state changes.

**Interactions and Responsiveness:**
- Include smooth CSS transitions (e.g., `transition-all duration-200 ease-in-out`) for hover and click states.
- The button should be fully responsive, maintaining touch-friendly hit areas on mobile devices.
- Ensure the component is accessible by including appropriate ARIA attributes for buttons.

**Technical Requirements:**
- Implement the "Headless" pattern: the component should handle the logic (state management) and delegate the visual output to a callback function provided by the user.
- The component must be modular and follow Atomic Design principles, ensuring it can be easily dropped into any design system.
- Provide a clean API where the developer can easily swap out styles based on the `isPressed` boolean provided by the component's internal hook or logic.