💳 TailwindPay — Payment UI with Tailwind CSS
Live Demo here : click here
A modern, fully responsive payment interface website built using Tailwind CSS, inspired by real-world fintech platforms like Razorpay and Stripe..
Focused on clean UI architecture, reusable components, and production-style layout practices..
📁 Project Structure
TailwindPay/
├── public/
│ └── assets/
│ ├── icons/
│ └── images/
│
├── src/
│ ├── components/
│ │ ├── Navbar.html
│ │ ├── Hero.html
│ │ ├── Pricing.html
│ │ ├── Checkout.html
│ │ ├── Success.html
│ │ └── Footer.html
│ │
│ ├── pages/
│ │ ├── Home.html
│ │ ├── Plans.html
│ │ ├── Payment.html
│ │ └── Confirmation.html
│ │
│ ├── main.css
│ └── index.html
│
├── tailwind.config.js
├── postcss.config.js
├── package.json
└── README.md
🚀 Features
Fully responsive payment UI (mobile, tablet, desktop)
Built 100% with Tailwind CSS utility classes
Multi-page flow: Landing → Plans → Checkout → Success
Reusable UI components (buttons, cards, modals, navbar)
Glassmorphism, gradients, and grid-based layouts
Ready for dark mode theming\
## 🛠 Tech Stack
| Layer | Technology |
|------------|-------------------|
| Markup | HTML5 |
| Styling | Tailwind CSS |
| Icons | Lucide / Feather |
| Build Tool | Vite |
🎯 Purpose
This project demonstrates:
Practical Tailwind CSS architecture
Fintech UI/UX layout standards
Component-based design without frameworks
Production-level folder structuring
📜 License
MIT License — free to use, modify, and distribute.