Home
ORGIN_DREAMS
Payment form

Payment form

This tailwind example is contributed by ORGIN_DREAMS, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing Other

Author ORGIN_DREAMS

146

Fork Fullscreen

<section class="bg-gray-100 py-20 px-6">
  <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    
    
    <div class="p-8">
      <h2 class="text-2xl font-bold text-gray-800 mb-4">Payment Details</h2>
      <form class="space-y-5">
        <div>
          <label class="block mb-1 text-sm text-gray-600">Name on Card</label>
          <input type="text" placeholder="John Doe" class="w-full border px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div>
          <label class="block mb-1 text-sm text-gray-600">Card Number</label>
          <input type="text" placeholder="1234 5678 9012 3456" class="w-full border px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div class="flex gap-4">
          <div class="w-1/2">
            <label class="block mb-1 text-sm text-gray-600">Expiry</label>
            <input type="text" placeholder="MM/YY" class="w-full border px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          </div>
          <div class="w-1/2">
            <label class="block mb-1 text-sm text-gray-600">CVC</label>
            <input type="text" placeholder="123" class="w-full border px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          </div>
        </div>
        <button type="submit" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white text-lg py-3 rounded-lg transition">Pay $49.99</button>
      </form>
    </div>

<div class="bg-gray-50 p-8 border-l border-gray-200">
      <h3 class="text-xl font-semibold text-gray-700 mb-6">Choose Payment Method</h3>

<div class="space-y-4">
        
        <div class="flex items-center p-4 bg-white rounded-lg shadow-sm border hover:shadow-md transition">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Visa.svg/512px-Visa.svg.png" class="h-6 mr-4" alt="Visa" />
          <p class="text-gray-700 font-medium">Credit / Debit Card</p>
        </div>
        
        
        <div class="flex items-center p-4 bg-white rounded-lg shadow-sm border hover:shadow-md transition">
          <img src="https://www.paypalobjects.com/webstatic/icon/pp258.png" class="h-6 mr-4" alt="PayPal" />
          <p class="text-gray-700 font-medium">PayPal</p>
        </div>

<div class="flex items-center p-4 bg-white rounded-lg shadow-sm border hover:shadow-md transition">
          <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" class="h-6 mr-4" alt="Apple" />
          <p class="text-gray-700 font-medium">Apple Pay</p>
        </div>
      </div>

<div class="mt-10 border-t pt-6">
        <h4 class="text-gray-700 font-semibold mb-2">Order Summary</h4>
        <div class="flex justify-between text-gray-600">
          <span>Subscription Plan</span>
          <span>$49.99</span>
        </div>
        <div class="flex justify-between text-gray-600 mt-1">
          <span>Tax</span>
          <span>$0.00</span>
        </div>
        <div class="flex justify-between text-lg font-bold text-gray-800 mt-4">
          <span>Total</span>
          <span>$49.99</span>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

3 months ago

495
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

3 months ago

586
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

3 months ago

293
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

3 months ago

328
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

656
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

1 month ago

33
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

1 month ago

143
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 weeks ago

157
pricing
pricing

Author:
Omer fils ELENGA

3 weeks ago

81
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

4 months ago

469
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.3k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

5 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components