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

2.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

Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

7 months ago

1.5k
Drinkware landing page

Author:
Maxim

4 months ago

956
Monkey card
First tailwind example

Author:
muhittin budak

4 months ago

295
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.3k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11.7k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

5 months ago

796
Product Details Card

Author:
ABDO-SY

5 months ago

1.3k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

10k
Simple Review Card

Author:
Ranit Saha

4 months ago

532
offer card

Author:
ABDO-SY

5 months ago

609
cards order
odering samethng

Author:
Uwase Alliance

2 months ago

176
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

10 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components