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

446

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

6 months ago

885
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

6 months ago

838
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

6 months ago

429
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

6 months ago

645
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

6 months ago

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

Author:
Rathanak Phan

4 months ago

392
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

4 months ago

588
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

669
pricing
pricing

Author:
Omer fils ELENGA

3 months ago

405
Pricing Plans

Author:
ariaw

1 month ago

190
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components