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

3.1k

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

home
html , css

Author:
Hacker Development

6 months ago

1.7k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.6k
Signup page- Paper / Hand-drawn UI

Author:
Akram Khan

4 months ago

524
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

788
Brand Grid with Hover Effect

Author:
ariaw

8 months ago

1.2k
Hover Card

Author:
Maxim

1 year ago

2.6k
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

7 months ago

807
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12k
card
It's a product card

Author:
SAURAV SINGH

7 months ago

1.1k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

2.2k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

1 month ago

82
Card responsive and dark mode grid

Author:
Cristian

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components