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

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

Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.6k
Fancy pricing card

Author:
Laurits

2 years ago

13k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

1 month ago

215
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

3 months ago

680
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 month ago

288
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.1k
Stacked Checkboxes

Author:
kishan pc

1 year ago

1.9k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

8.9k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.3k
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

11.2k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

5 months ago

649

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components