Tailwind CSS Gift Card Purchase Forms Blocks

All Blocks
Ecommerce
Gift Card Purchase Forms

Gift Card Purchase Forms

Gift card purchase forms for selecting delivery methods, preset amounts, recipient details, and optional messages.

Gift Card Purchase Form with Delivery Method and Amount Grid Pro

Split gift card purchase form pairs a visual card preview with delivery method radios, preset amount selectors, recipient fields, and an optional message textarea.

<div class="mb-5">
      <h1 class="font-medium text-xl text-foreground">
        Gift Cards
      </h1>
    </div>

<div class="pb-10 lg:pb-20">
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-y-10 gap-x-5">
        <div class="order-1 md:order-2 w-full max-w-sm mx-auto">
          
          <p class="mb-2 font-medium text-foreground">
            Choose a design
          </p>

<div class="p-1 flex flex-col justify-center items-center bg-linear-to-br from-orange-100 via-purple-200 via-70% to-indigo-200 rounded-2xl dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800">
            <div class="p-1 size-full bg-background rounded-xl">
              <div class="p-4 min-h-56 flex flex-col justify-center items-center bg-linear-to-bl from-cyan-200 to-purple-300 rounded-lg dark:from-purple-400 dark:to-blue-600">
                <span class="block text-7xl">🎉</span>
              </div>
            </div>
          </div>

<div class="mt-5 flex flex-wrap justify-center gap-2.5">
            
            <label for="hs-pro-shgctn1" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
              <input type="radio" id="hs-pro-shgctn1" class="hidden" value="@@title" name="hs-pro-shgctn" checked>
              <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-bl from-cyan-200 to-purple-300 rounded-lg dark:from-purple-400 dark:to-blue-600"><span class="text-lg">🎉</span></span>
            </label>

<label for="hs-pro-shgctn2" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
              <input type="radio" id="hs-pro-shgctn2" class="hidden" value="@@title" name="hs-pro-shgctn" >
              <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-l from-red-200 to-orange-200 rounded-lg dark:from-red-400 dark:to-orange-600"><span class="text-lg">🎁</span></span>
            </label>
            
  
            
            <label for="hs-pro-shgctn3" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
              <input type="radio" id="hs-pro-shgctn3" class="hidden" value="@@title" name="hs-pro-shgctn" >
              <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-bl from-red-300 to-fuchsia-200 rounded-lg dark:from-red-500 dark:to-fuchsia-500"><span class="text-lg">❤️</span></span>
            </label>
            
  
            
            <label for="hs-pro-shgctn4" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
              <input type="radio" id="hs-pro-shgctn4" class="hidden" value="@@title" name="hs-pro-shgctn" >
              <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-t from-sky-400 to-cyan-100 rounded-lg dark:from-sky-500 dark:to-cyan-200"><span class="text-lg">🙏</span></span>
            </label>
            
  
            
            <label for="hs-pro-shgctn5" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
              <input type="radio" id="hs-pro-shgctn5" class="hidden" value="@@title" name="hs-pro-shgctn" >
              <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-t from-cyan-400 to-orange-200 rounded-lg dark:from-cyan-500 dark:to-orange-200"><span class="text-lg">🏖️</span></span>
            </label>
            
          </div>
          
        </div>

<div class="order-2 md:order-1 space-y-7">
          <div>
            <p class="mb-2 font-medium text-foreground">
              Choose a delivery method
            </p>

<div class="grid grid-cols-2 gap-3">
              
              <label for="hs-pro-shgcdm1" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                <input type="radio" id="hs-pro-shgcdm1" class="hidden" value="@@title" name="hs-pro-shgcdm" >
                <svg class="shrink-0 size-5 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg><span class="block mt-2">Email</span>
              </label>

<label for="hs-pro-shgcdm2" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                <input type="radio" id="hs-pro-shgcdm2" class="hidden" value="@@title" name="hs-pro-shgcdm" >
                <svg class="shrink-0 size-5 mx-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M13 8H7"/><path d="M17 12H7"/></svg><span class="block mt-2">Text message</span>
              </label>
              
            </div>
            
          </div>

<div>
            <p class="mb-2 font-medium text-foreground">
              Choose an amount
            </p>

<div class="grid grid-cols-3 gap-2">
              
              <label for="hs-pro-shgcam1" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam1" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$25</span>
                </span>
              </label>

<label for="hs-pro-shgcam2" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam2" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$50</span>
                </span>
              </label>

<label for="hs-pro-shgcam3" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam3" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$75</span>
                </span>
              </label>

<label for="hs-pro-shgcam4" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam4" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$100</span>
                </span>
              </label>

<label for="hs-pro-shgcam5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam5" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$150</span>
                </span>
              </label>

<label for="hs-pro-shgcam6" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam6" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$200</span>
                </span>
              </label>

<label for="hs-pro-shgcam7" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam7" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$250</span>
                </span>
              </label>

<label for="hs-pro-shgcam8" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam8" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$500</span>
                </span>
              </label>

<label for="hs-pro-shgcam9" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
              has-checked:text-primary-checked
              has-checked:border-primary-checked
              has-checked:ring-1
              has-checked:ring-primary-checked
              has-disabled:pointer-events-none
              has-disabled:opacity-70
              has-disabled:text-line-2
              has-disabled:after:absolute
              has-disabled:after:inset-0
              has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                <input type="radio" id="hs-pro-shgcam9" class="hidden" name="hs-pro-shgcam" >
                <span class="block">
                  <span class="block py-0.5">$1000</span>
                </span>
              </label>
              
            </div>
            
          </div>

<div>
            <label for="hs-pro-shca" class="block mb-2 font-medium text-foreground">
              Custom amount:
            </label>

<div>
            <p class="mb-2 font-medium text-foreground">
              Add recipient delivery details
            </p>

<div>
                <label for="hs-pro-shgcem" class="sr-only">
                  Email
                </label>

<div>
                <label for="hs-pro-shgcph" class="sr-only">
                  Phone
                </label>

<div>
            <label for="hs-pro-shgccm" class="block mb-2 font-medium text-foreground">
              Add an optional message
            </label>

<div class="space-y-3">
            <p class="font-medium text-foreground">
              Treat someone with a Gift
            </p>

<p class="text-sm text-muted-foreground-1">
              Shopping for someone else but not sure what to give them? Give them the gift of choice with a Unify gift card.
            </p>

<p class="text-sm text-muted-foreground-1">
              <span class="font-medium text-foreground">Limitations:</span> Your Gift Card Balance cannot be transferred to other accounts or used to purchase other gift cards.
            </p>