Home
Antony
credit card checkout

credit card checkout

This tailwind example is contributed by Antony, on 21-Feb-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Antony

1.8k

Fork Fullscreen

<div class="container flex flex-col min-h-screen max-w-full">
   <div class="bg-white text-white py-8 shadow-lg max-w-full">
      <div class="container mx-auto px-4 items-center justify-between">
        <div class="flex items-center">
          Logo
          </div>
        </div>
   </div>
  <div class="max-w-md mx-auto md:max-w-xl p-6">
   
    <div class="md:flex">
      <div class="w-full px-6 py-8 md:p-8 bg-white shadow-lg">
        <p class="mt-4 mb-6 text-gray-700">Payment</p>
        <div class=""></div>
        <form class="">
          <div class="mb-6">
            <label class="block text-gray-700 mb-2">Card Number<label>
            <input type="text" name="cardNumber" class="w-full p-2 shadow-sm rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-300 focus:ring-opacity-20" placeholder="0000 00000 0000 0000" />
          </div>
          
          <div class="flex mb-6 gap-4 w-full">
            <div class="w-1/2">
              <label class="text-gray-700">Expiration Date<label>
              <input type="text" name="expiryDate" class="w-full p-2 shadow-sm rounded-md border border-gray-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:border-indigo-300 focus:ring-opacity-20" placeholder="MM/YY" />
            </div>

Related Examples

Product features cards

Author:
Henrik R.

10 months ago

2.7k
Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

5 months ago

974
User profile card with Cover Image

Author:
Noob

2 years ago

26.4k
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

1 week ago

40
Image card with overlay text overlay

Author:
Santos78

2 years ago

28.6k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

9.8k
Shopping Cart -Card

Author:
ABDO-SY

4 days ago

50
Author box

Author:
Mr Robot

2 years ago

11k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

3 months ago

567
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

5 months ago

1.1k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12k
Features grid

Author:
Sophia Baker

2 years ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components