Component
Full Width Button
Full width buttons for mobile views and prominent call-to-action sections
- Component
- Tailwind
- MIT
Preview
Live component
9:41 100%
devsnips.site/library/tailwind/components/buttons/basic-button/full-width/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Components/Buttons/basic-button/full-width Tailwind/Components/Buttons/basic-button/full-width <!-- Full Width Button -->
<button class="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Full Width Button
</button>
<!-- Split Buttons - Left -->
<button class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Split Left
</button>
<!-- Split Buttons - Right -->
<button class="px-6 py-3 bg-gray-200 text-gray-900 font-medium rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Split Right
</button># Basic Button Full Width
Full-width basic button variant for forms, mobile CTAs, and stacked actions.
## Preview
Open `preview.html` for a standalone demonstration of this variant.
## Features
- Full-width layout (`w-full`)
- Clear focus states
- Native button
## Usage
```bash
npx devsnips add Tailwind/Components/Buttons/basic-button/full-width
```
Copy from `code.html`.
## Customization
- Background / text / border colors
- Padding and radius
- Focus ring
## Accessibility
- Native `<button>`
- Focus-visible styles
## Dependencies
- Tailwind CSS only
## File Structure
- `code.html` — copy/paste snippet
- `preview.html` — standalone demo
- `metadata.json` — metadata
- `README.md` — this file 14 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf
Agent skill & Model Context Protocol
Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.
devsnips://components/buttons/basic-button/full-width I want to use this DevSnips resource in production: Page: https://devsnips.site/library/tailwind/components/buttons/basic-button/full-width/ Install: npx devsnips add Tailwind/Components/Buttons/basic-button/full-width This is the Full Width Button — Full width buttons for mobile views and prominent call-to-action sections Use this DevSnips resource as the starting point for my project. Adapt it to my project's stack and conventions, fix any issues, and make it production-ready while preserving its intended design and behavior.
Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.
Resource URI
devsnips://components/buttons/basic-button/full-width