Home
ABDO-SY
Payment Form

Payment Form

This tailwind example is contributed by ABDO-SY, on 26-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Form Input Login Form

Author ABDO-SY

1.6k

Fork Fullscreen

<section class="-z-40  bg-[#82CCDD] h-screen   flex items-center justify-center">
  <form class="bg-white w-[360px] flex flex-col gap-6 rounded-3xl p-8 pt-4" action="">
    <div><img class="mx-auto mb-2" src="https://iili.io/3JrjNSI.png" alt="">
      <h2 class="text-center text-[20px] font-bold">Payment info</h2>
    </div>
    <div class="flex flex-col gap-2 mt-4">
      <label for="" class="text-[#030102] text-base font-normal font-['Roboto']">Full Name</label><input placeholder="Alex Smith" type="text" class="bg-white py-2 px-3 rounded-[10px] shadow-[0px_4px_18px_0px_rgba(158,168,189,0.31)] border border-[#e2e6ee] ">
    </div>
    <div class="flex relative flex-col gap-2 mt-4">
      <label for="" class="text-[#030102] text-base font-normal font-['Roboto']">Full Name</label><input placeholder="1234 1234 1234 1234" type="text" class="bg-[#E2E6EE] py-2 px-3 rounded-[10px] shadow-[0px_4px_18px_0px_rgba(158,168,189,0.31)] border border-[#e2e6ee]"><svg
        width="14" height="14" class="absolute bottom-3 right-2 cursor-pointer" viewBox="0 0 14 14" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_109_7)">
          <path
            d="M12.25 2.33333H1.74998C1.10565 2.33333 0.583313 2.85566 0.583313 3.49999V10.5C0.583313 11.1443 1.10565 11.6667 1.74998 11.6667H12.25C12.8943 11.6667 13.4166 11.1443 13.4166 10.5V3.49999C13.4166 2.85566 12.8943 2.33333 12.25 2.33333Z"
            stroke="#9EA8BD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M0.583313 5.83333H13.4166" stroke="#9EA8BD" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"></path>
        </g>
        <defs>
          <clipPath id="clip0_109_7">
            <rect width="14" height="14" fill="white"></rect>
          </clipPath>
        </defs>
      </svg></div>
    <div class="flex gap-3 mt-4">
      <div class="flex  flex-col gap-2">
        <label for="" class="text-[#030102] text-base font-normal font-['Roboto']">Exp Date</label><input placeholder="MM/YY" type="text" class="bg-[#E2E6EE] w-full py-2 px-3 rounded-[10px] shadow-[0px_4px_18px_0px_rgba(158,168,189,0.31)] border border-[#e2e6ee]">
      </div>
      <div class="flex relative flex-col gap-2">
        <label for="" class="text-[#030102] text-base font-normal font-['Roboto']">CVV</label><input placeholder="..." type="text" class="bg-[#E2E6EE] w-full py-2 px-3 rounded-[10px] shadow-[0px_4px_18px_0px_rgba(158,168,189,0.31)] border border-[#e2e6ee]"><svg
          width="14" height="14" class="absolute bottom-3 right-2 cursor-pointer" viewBox="0 0 14 14" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_109_15)">
            <path
              d="M7.00002 12.8333C10.2217 12.8333 12.8334 10.2217 12.8334 7C12.8334 3.77834 10.2217 1.16666 7.00002 1.16666C3.77836 1.16666 1.16669 3.77834 1.16669 7C1.16669 10.2217 3.77836 12.8333 7.00002 12.8333Z"
              fill="#BCC3D1" stroke="#BCC3D1" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7 9.33333V7" stroke="url(#paint0_linear_109_15)" stroke-width="1.8" stroke-linecap="round"
              stroke-linejoin="round"></path>
            <path d="M7 4.66666H7.00583" stroke="url(#paint1_linear_109_15)" stroke-width="1.8" stroke-linecap="round"
              stroke-linejoin="round"></path>
          </g>
          <defs>
            <linearGradient id="paint0_linear_109_15" x1="7.5" y1="7" x2="7.5" y2="9.33333"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="white"></stop>
              <stop offset="1" stop-color="white" stop-opacity="0"></stop>
            </linearGradient>
            <linearGradient id="paint1_linear_109_15" x1="7.00292" y1="4.66666" x2="7.00292" y2="5.66666"
              gradientUnits="userSpaceOnUse">
              <stop stop-color="white"></stop>
              <stop offset="1" stop-color="white" stop-opacity="0"></stop>
            </linearGradient>
            <clipPath id="clip0_109_15">
              <rect width="14" height="14" fill="white"></rect>
            </clipPath>
          </defs>
        </svg></div>
    </div>
    <div class="flex  flex-col gap-2">
      <label for="" class="text-[#030102] text-base font-normal font-['Roboto']">Zip Code</label><input placeholder="90210" type="text" class="bg-[#E2E6EE] w-full py-2 px-3 rounded-[10px] shadow-[0px_4px_18px_0px_rgba(158,168,189,0.31)] border border-[#e2e6ee]">
    </div>
    <div>
      <button class="py-3 w-full bg-[#288fb4] rounded-[10px]  text-white text-sm font-normal">Confirm Payment</button><span class="text-[#030102] w-full mt-2 text-xs font-light ">You verify that this info is correct</span>
    </div>
  </form>
</section>

Related Examples

Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

10 months ago

1.2k
File input

Author:
Anonymous

2 years ago

7.6k
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Author:
Aman kumar

11 months ago

1.1k
Contact form Modern
Contact Us We'd love to hear from you!

Author:
Alif Bima Pradana

1 month ago

200
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
Tailwind Animated 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.

Author:
shrenik khule

1 month ago

280
Checkbox button
press the button to check

Author:
Anonymous

2 years ago

4.9k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

1 year ago

2.7k
Email input

Author:
Sophia Baker

3 years ago

11.3k
Incentives
tailwind css Incentives

Author:
Anonymous

2 years ago

5.3k
Tailwind login page

Author:
Kofi Osei

3 years ago

11k
Contact us form template

Author:
Lukas Müller

3 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components