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

Cards - Users Card
Users card grid list

Author:
Casimiro Rocha

5 months ago

1.5k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.4k
Gridaient Card Information Section
a card in neon design

Author:
Akram Khan

7 months ago

1.3k
Labs card
Lab item list card

Author:
Sedat Kumcu

5 months ago

1.2k
Border gradient

Author:
Samuel Dawson

2 years ago

14.1k
Responsive cards with hover

Author:
Robert Chunga

10 months ago

2.1k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.3k
Travel Landing Page: Australia

Author:
Maxim

3 weeks ago

551
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

3 months ago

832
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

18.8k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

14.3k
Card Slider

Author:
Maxim

3 weeks ago

270

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components