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

516

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