credit card checkout

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

Tailwind v3.4 4k 6

<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

News Feed

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Card grid for posts

Mr Robot

3 years ago

24.1k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

7 months ago

732
Image card

Laurits

3 years ago

18.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
User Feedback Card
A responsive user feedback card that displays user information, their role, and a testimonial. The card is styled using Tailwind CSS for a clean and modern look.

Anum Shahana

1 year ago

2.1k
Chats Screen in neomorphism

Akram Khan

2 years ago

3k
medical care
It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

Nishimwe Jeanine

1 year ago

1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Blog Author Card

EliteAI Tools

1 year ago

1.8k
Responsive Features Section

ariaw

1 year ago

1.6k