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

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

Tailwind card with gradient border

Author:
Elijah Davis

2 years ago

15.9k
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

1 month ago

98
Cards Seaction - Services block

Author:
ABDO-SY

10 months ago

1.6k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.8k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

2 years ago

5.3k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

9 months ago

607
Profile Card

Author:
Crimson

1 year ago

1.6k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

3 months ago

209
Feature card

Author:
Matti

1 year ago

1.1k
Card for user contact

Author:
achelton pambo

1 year ago

2.5k
Gradient card

Author:
TailwindFlex

2 years ago

9.5k
Info cards for admin panal

Author:
Sophia Baker

3 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components