Developer-Friendly Tailwind Ecommerce Components

Verification Code Input

<form class="mx-auto max-w-sm">
  <div class="flex items-center">
    <button id="dropdown-phone-button" data-dropdown-toggle="dropdown-phone" class="z-10 inline-flex flex-shrink-0 items-center rounded-s-lg border border-gray-300 bg-gray-100 px-4 py-2.5 text-center text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-100" type="button">
      <svg fill="none" aria-hidden="true" class="me-2 h-4 w-4" viewBox="0 0 20 15">
        <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
        <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
        <g mask="url(#a)">
          <path fill="#D02F44" fill-rule="evenodd" d="M19.6.5H0v.933h19.6V.5zm0 1.867H0V3.3h19.6v-.933zM0 4.233h19.6v.934H0v-.934zM19.6 6.1H0v.933h19.6V6.1zM0 7.967h19.6V8.9H0v-.933zm19.6 1.866H0v.934h19.6v-.934zM0 11.7h19.6v.933H0V11.7zm19.6 1.867H0v.933h19.6v-.933z" clip-rule="evenodd" />
          <path fill="#46467F" d="M0 .5h8.4v6.533H0z" />
          <g filter="url(#filter0_d_343_121520)"><path fill="url(#paint0_linear_343_121520)" fill-rule="evenodd" d="M1.867 1.9a.467.467 0 11-.934 0 .467.467 0 01.934 0zm1.866 0a.467.467 0 11-.933 0 .467.467 0 01.933 0zm1.4.467a.467.467 0 100-.934.467.467 0 000 .934zM7.467 1.9a.467.467 0 11-.934 0 .467.467 0 01.934 0zM2.333 3.3a.467.467 0 100-.933.467.467 0 000 .933zm2.334-.467a.467.467 0 11-.934 0 .467.467 0 01.934 0zm1.4.467a.467.467 0 100-.933.467.467 0 000 .933zm1.4.467a.467.467 0 11-.934 0 .467.467 0 01.934 0zm-2.334.466a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.466a.467.467 0 11-.933 0 .467.467 0 01.933 0zM1.4 4.233a.467.467 0 100-.933.467.467 0 000 .933zm1.4.467a.467.467 0 11-.933 0 .467.467 0 01.933 0zm1.4.467a.467.467 0 100-.934.467.467 0 000 .934zM6.533 4.7a.467.467 0 11-.933 0 .467.467 0 01.933 0zM7 6.1a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.467a.467.467 0 11-.933 0 .467.467 0 01.933 0zM3.267 6.1a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.467a.467.467 0 11-.934 0 .467.467 0 01.934 0z" clip-rule="evenodd" /></g>
        </g>
        <defs>
          <linearGradient id="paint0_linear_343_121520" x1=".933" x2=".933" y1="1.433" y2="6.1" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff" />
            <stop offset="1" stop-color="#F0F0F0" />
          </linearGradient>
          <filter id="filter0_d_343_121520" width="6.533" height="5.667" x=".933" y="1.433" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood flood-opacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_343_121520" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_343_121520" result="shape" />
          </filter>
        </defs>
      </svg>
      +1 <svg class="ms-2.5 h-2.5 w-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" /></svg>
    </button>
    <div id="dropdown-phone" class="z-10 hidden w-52 divide-y divide-gray-100 rounded-lg bg-white shadow">
      <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdown-phone-button">
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg fill="none" aria-hidden="true" class="me-2 h-4 w-4" viewBox="0 0 20 15">
                <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
                <g mask="url(#a)">
                  <path fill="#D02F44" fill-rule="evenodd" d="M19.6.5H0v.933h19.6V.5zm0 1.867H0V3.3h19.6v-.933zM0 4.233h19.6v.934H0v-.934zM19.6 6.1H0v.933h19.6V6.1zM0 7.967h19.6V8.9H0v-.933zm19.6 1.866H0v.934h19.6v-.934zM0 11.7h19.6v.933H0V11.7zm19.6 1.867H0v.933h19.6v-.933z" clip-rule="evenodd" />
                  <path fill="#46467F" d="M0 .5h8.4v6.533H0z" />
                  <g filter="url(#filter0_d_343_121520)"><path fill="url(#paint0_linear_343_121520)" fill-rule="evenodd" d="M1.867 1.9a.467.467 0 11-.934 0 .467.467 0 01.934 0zm1.866 0a.467.467 0 11-.933 0 .467.467 0 01.933 0zm1.4.467a.467.467 0 100-.934.467.467 0 000 .934zM7.467 1.9a.467.467 0 11-.934 0 .467.467 0 01.934 0zM2.333 3.3a.467.467 0 100-.933.467.467 0 000 .933zm2.334-.467a.467.467 0 11-.934 0 .467.467 0 01.934 0zm1.4.467a.467.467 0 100-.933.467.467 0 000 .933zm1.4.467a.467.467 0 11-.934 0 .467.467 0 01.934 0zm-2.334.466a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.466a.467.467 0 11-.933 0 .467.467 0 01.933 0zM1.4 4.233a.467.467 0 100-.933.467.467 0 000 .933zm1.4.467a.467.467 0 11-.933 0 .467.467 0 01.933 0zm1.4.467a.467.467 0 100-.934.467.467 0 000 .934zM6.533 4.7a.467.467 0 11-.933 0 .467.467 0 01.933 0zM7 6.1a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.467a.467.467 0 11-.933 0 .467.467 0 01.933 0zM3.267 6.1a.467.467 0 100-.933.467.467 0 000 .933zm-1.4-.467a.467.467 0 11-.934 0 .467.467 0 01.934 0z" clip-rule="evenodd" /></g>
                </g>
                <defs>
                  <linearGradient id="paint0_linear_343_121520" x1=".933" x2=".933" y1="1.433" y2="6.1" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#fff" />
                    <stop offset="1" stop-color="#F0F0F0" />
                  </linearGradient>
                  <filter id="filter0_d_343_121520" width="6.533" height="5.667" x=".933" y="1.433" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                    <feOffset dy="1" />
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_343_121520" />
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_343_121520" result="shape" />
                  </filter>
                </defs>
              </svg>
              United States (+1)
            </span>
          </button>
        </li>
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg class="me-2 h-4 w-4" fill="none" viewBox="0 0 20 15">
                <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
                <g mask="url(#a)">
                  <path fill="#0A17A7" d="M0 .5h19.6v14H0z" />
                  <path fill="#fff" fill-rule="evenodd" d="M-.898-.842L7.467 4.8V-.433h4.667V4.8l8.364-5.642L21.542.706l-6.614 4.46H19.6v4.667h-4.672l6.614 4.46-1.044 1.549-8.365-5.642v5.233H7.467V10.2l-8.365 5.642-1.043-1.548 6.613-4.46H0V5.166h4.672L-1.941.706-.898-.842z" clip-rule="evenodd" />
                  <path stroke="#DB1F35" stroke-linecap="round" stroke-width=".667" d="M13.067 4.933L21.933-.9M14.009 10.088l7.947 5.357M5.604 4.917L-2.686-.67M6.503 10.024l-9.189 6.093" />
                  <path fill="#E6273E" fill-rule="evenodd" d="M0 8.9h8.4v5.6h2.8V8.9h8.4V6.1h-8.4V.5H8.4v5.6H0v2.8z" clip-rule="evenodd" />
                </g>
              </svg>
              United Kingdom (+44)
            </span>
          </button>
        </li>
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg class="me-2 h-4 w-4" fill="none" viewBox="0 0 20 15" xmlns="http://www.w3.org/2000/svg">
                <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
                <g mask="url(#a)">
                  <path fill="#0A17A7" d="M0 .5h19.6v14H0z" />
                  <path fill="#fff" stroke="#fff" stroke-width=".667" d="M0 .167h-.901l.684.586 3.15 2.7v.609L-.194 6.295l-.14.1v1.24l.51-.319L3.83 5.033h.73L7.7 7.276a.488.488 0 00.601-.767L5.467 4.08v-.608l2.987-2.134a.667.667 0 00.28-.543V-.1l-.51.318L4.57 2.5h-.73L.66.229.572.167H0z" />
                  <path fill="url(#paint0_linear_374_135177)" fill-rule="evenodd" d="M0 2.833V4.7h3.267v2.133c0 .369.298.667.666.667h.534a.667.667 0 00.666-.667V4.7H8.2a.667.667 0 00.667-.667V3.5a.667.667 0 00-.667-.667H5.133V.5H3.267v2.333H0z" clip-rule="evenodd" />
                  <path fill="url(#paint1_linear_374_135177)" fill-rule="evenodd" d="M0 3.3h3.733V.5h.934v2.8H8.4v.933H4.667v2.8h-.934v-2.8H0V3.3z" clip-rule="evenodd" />
                  <path fill="#fff" fill-rule="evenodd" d="M4.2 11.933l-.823.433.157-.916-.666-.65.92-.133.412-.834.411.834.92.134-.665.649.157.916-.823-.433zm9.8.7l-.66.194.194-.66-.194-.66.66.193.66-.193-.193.66.193.66-.66-.194zm0-8.866l-.66.193.194-.66-.194-.66.66.193.66-.193-.193.66.193.66-.66-.193zm2.8 2.8l-.66.193.193-.66-.193-.66.66.193.66-.193-.193.66.193.66-.66-.193zm-5.6.933l-.66.193.193-.66-.193-.66.66.194.66-.194-.193.66.193.66-.66-.193zm4.2 1.167l-.33.096.096-.33-.096-.33.33.097.33-.097-.097.33.097.33-.33-.096z" clip-rule="evenodd" />
                </g>
                <defs>
                  <linearGradient id="paint0_linear_374_135177" x1="0" x2="0" y1=".5" y2="7.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#fff" />
                    <stop offset="1" stop-color="#F0F0F0" />
                  </linearGradient>
                  <linearGradient id="paint1_linear_374_135177" x1="0" x2="0" y1=".5" y2="7.033" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#FF2E3B" />
                    <stop offset="1" stop-color="#FC0D1B" />
                  </linearGradient>
                </defs>
              </svg>
              Australia (+61)
            </span>
          </button>
        </li>
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg class="me-2 h-4 w-4" fill="none" viewBox="0 0 20 15">
                <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
                <g mask="url(#a)">
                  <path fill="#262626" fill-rule="evenodd" d="M0 5.167h19.6V.5H0v4.667z" clip-rule="evenodd" />
                  <g filter="url(#filter0_d_374_135180)"><path fill="#F01515" fill-rule="evenodd" d="M0 9.833h19.6V5.167H0v4.666z" clip-rule="evenodd" /></g>
                  <g filter="url(#filter1_d_374_135180)"><path fill="#FFD521" fill-rule="evenodd" d="M0 14.5h19.6V9.833H0V14.5z" clip-rule="evenodd" /></g>
                </g>
                <defs>
                  <filter id="filter0_d_374_135180" width="19.6" height="4.667" x="0" y="5.167" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                    <feOffset />
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_374_135180" />
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_374_135180" result="shape" />
                  </filter>
                  <filter id="filter1_d_374_135180" width="19.6" height="4.667" x="0" y="9.833" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                    <feOffset />
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_374_135180" />
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_374_135180" result="shape" />
                  </filter>
                </defs>
              </svg>
              Germany (+49)
            </span>
          </button>
        </li>
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg class="me-2 h-4 w-4" fill="none" viewBox="0 0 20 15">
                <rect width="19.1" height="13.5" x=".25" y=".75" fill="#fff" stroke="#F5F5F5" stroke-width=".5" rx="1.75" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.1" height="13.5" x=".25" y=".75" fill="#fff" stroke="#fff" stroke-width=".5" rx="1.75" /></mask>
                <g mask="url(#a)">
                  <path fill="#F44653" d="M13.067.5H19.6v14h-6.533z" />
                  <path fill="#1035BB" fill-rule="evenodd" d="M0 14.5h6.533V.5H0v14z" clip-rule="evenodd" />
                </g>
              </svg>
              France (+33)
            </span>
          </button>
        </li>
        <li>
          <button type="button" class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <span class="inline-flex items-center">
              <svg class="me-2 h-4 w-4" fill="none" viewBox="0 0 20 15">
                <rect width="19.6" height="14" y=".5" fill="#fff" rx="2" />
                <mask id="a" style="mask-type:luminance" width="20" height="15" x="0" y="0" maskUnits="userSpaceOnUse"><rect width="19.6" height="14" y=".5" fill="#fff" rx="2" /></mask>
                <g mask="url(#a)">
                  <path fill="#262626" fill-rule="evenodd" d="M0 5.167h19.6V.5H0v4.667z" clip-rule="evenodd" />
                  <g filter="url(#filter0_d_374_135180)"><path fill="#F01515" fill-rule="evenodd" d="M0 9.833h19.6V5.167H0v4.666z" clip-rule="evenodd" /></g>
                  <g filter="url(#filter1_d_374_135180)"><path fill="#FFD521" fill-rule="evenodd" d="M0 14.5h19.6V9.833H0V14.5z" clip-rule="evenodd" /></g>
                </g>
                <defs>
                  <filter id="filter0_d_374_135180" width="19.6" height="4.667" x="0" y="5.167" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                    <feOffset />
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_374_135180" />
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_374_135180" result="shape" />
                  </filter>
                  <filter id="filter1_d_374_135180" width="19.6" height="4.667" x="0" y="9.833" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                    <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                    <feOffset />
                    <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
                    <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_374_135180" />
                    <feBlend in="SourceGraphic" in2="effect1_dropShadow_374_135180" result="shape" />
                  </filter>
                </defs>
              </svg>
              Germany (+49)
            </span>
          </button>
        </li>
      </ul>
    </div>
    <label for="phone-input" class="sr-only mb-2 text-sm font-medium text-gray-900">Phone number:</label>
    <div class="relative w-full">
      <input type="text" id="phone-input" aria-describedby="helper-text-explanation" class="z-20 block w-full rounded-e-lg border border-s-0 border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required />
    </div>
  </div>
  <p id="helper-text-explanation" class="mb-4 mt-2 text-sm text-gray-500">We will send you an SMS with a verification code.</p>
  <button type="submit" class="mb-2 me-2 w-full rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">Send verification code</button>
</form>

<js-component src="ecommerce/verification_code_input"></js-component>

Credit Card Input

View

<form class="mx-auto max-w-sm">
  <label for="card-number-input" class="sr-only">Card number:</label>
  <div class="relative">
    <input type="text" id="card-number-input" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pe-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="4242 4242 4242 4242" pattern="^4[0-9]{12}(?:[0-9]{3})?$" required />
    <div class="pointer-events-none absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
      <svg fill="none" class="h-6 text-[#1434CB] dark:text-white" viewBox="0 0 36 21"><path fill="currentColor" d="M23.315 4.773c-2.542 0-4.813 1.3-4.813 3.705 0 2.756 4.028 2.947 4.028 4.332 0 .583-.676 1.105-1.832 1.105-1.64 0-2.866-.73-2.866-.73l-.524 2.426s1.412.616 3.286.616c2.78 0 4.966-1.365 4.966-3.81 0-2.913-4.045-3.097-4.045-4.383 0-.457.555-.957 1.708-.957 1.3 0 2.36.53 2.36.53l.514-2.343s-1.154-.491-2.782-.491zM.062 4.95L0 5.303s1.07.193 2.032.579c1.24.442 1.329.7 1.537 1.499l2.276 8.664h3.05l4.7-11.095h-3.043l-3.02 7.543L6.3 6.1c-.113-.732-.686-1.15-1.386-1.15H.062zm14.757 0l-2.387 11.095h2.902l2.38-11.096h-2.895zm16.187 0c-.7 0-1.07.37-1.342 1.016L25.41 16.045h3.044l.589-1.68h3.708l.358 1.68h2.685L33.453 4.95h-2.447zm.396 2.997l.902 4.164h-2.417l1.515-4.164z" /></svg>
    </div>
  </div>
  <div class="my-4 grid grid-cols-3 gap-4">
    <div class="relative col-span-2 max-w-sm">
      <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5">
        <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
        </svg>
      </div>
      <label for="card-expiration-input" class="sr-only">Card expiration date:</label>
      <input datepicker datepicker-format="mm/yy" id="card-expiration-input" type="text" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="12/23" required />
    </div>
    <div class="col-span-1">
      <label for="cvv-input" class="sr-only">Card CVV code:</label>
      <input type="number" id="cvv-input" aria-describedby="helper-text-explanation" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" placeholder="CVV" required />
    </div>
  </div>
  <button type="submit" class="mb-2 me-2 rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700">Pay now</button>
</form>

<js-component src="general/credit_card_input"></js-component>

Pin Code Input

View

<form class="mx-auto max-w-sm">
  <div class="mb-2 flex space-x-2 rtl:space-x-reverse">
    <div>
      <label for="code-1" class="sr-only">First code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-next="code-2" id="code-1" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
    <div>
      <label for="code-2" class="sr-only">Second code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-1" data-focus-input-next="code-3" id="code-2" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
    <div>
      <label for="code-3" class="sr-only">Third code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-2" data-focus-input-next="code-4" id="code-3" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
    <div>
      <label for="code-4" class="sr-only">Fourth code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-3" data-focus-input-next="code-5" id="code-4" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
    <div>
      <label for="code-5" class="sr-only">Fifth code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-4" data-focus-input-next="code-6" id="code-5" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
    <div>
      <label for="code-6" class="sr-only">Sixth code</label>
      <input type="text" maxlength="1" data-focus-input-init data-focus-input-prev="code-5" id="code-6" class="focus:ring-primary-500 focus:border-primary-500 block h-9 w-9 rounded-lg border border-gray-300 bg-white py-3 text-center text-sm font-extrabold text-gray-900" required />
    </div>
  </div>
  <p id="helper-text-explanation" class="mt-2 text-sm text-gray-500">Please introduce the 6 digit code we sent via email.</p>
</form>

<js-component src="ecommerce/pin_code_input"></js-component>

Delivery Method

View

<div class="space-y-4">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Delivery Methods</h3>

<div class="ms-4 text-sm">
                  <label for="dhl" class="font-medium leading-none text-gray-900 dark:text-white"> $15 - DHL Fast Delivery </label>
                  <p id="dhl-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">Get it by Tommorow</p>
                </div>
              </div>
            </div>

<div class="ms-4 text-sm">
                  <label for="fedex" class="font-medium leading-none text-gray-900 dark:text-white"> Free Delivery - FedEx </label>
                  <p id="fedex-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">Get it by Friday, 13 Dec 2023</p>
                </div>
              </div>
            </div>

<div class="ms-4 text-sm">
                  <label for="express" class="font-medium leading-none text-gray-900 dark:text-white"> $49 - Express Delivery </label>
                  <p id="express-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">Get it today</p>
                </div>
              </div>
            </div>
          </div>
        </div>

<js-component src="ecommerce/delivery_method"></js-component>

Payment Method

View

<div class="space-y-4">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Payment</h3>

<div class="ms-4 text-sm">
                  <label for="credit-card" class="font-medium leading-none text-gray-900 dark:text-white"> Credit Card </label>
                  <p id="credit-card-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">Pay with your credit card</p>
                </div>
              </div>

<div class="mt-4 flex items-center gap-2">
                <button type="button" class="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Delete</button>

<div class="ms-4 text-sm">
                  <label for="pay-on-delivery" class="font-medium leading-none text-gray-900 dark:text-white"> Payment on delivery </label>
                  <p id="pay-on-delivery-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">+$15 payment processing fee</p>
                </div>
              </div>

<div class="mt-4 flex items-center gap-2">
                <button type="button" class="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Delete</button>

<div class="ms-4 text-sm">
                  <label for="paypal-2" class="font-medium leading-none text-gray-900 dark:text-white"> Paypal account </label>
                  <p id="paypal-text" class="mt-1 text-xs font-normal text-gray-500 dark:text-gray-400">Connect to your account</p>
                </div>
              </div>

<div class="mt-4 flex items-center gap-2">
                <button type="button" class="text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Delete</button>

<js-component src="ecommerce/delivery_methods"></js-component>

Shipping Method With Radio

View

<div class="grid w-full sm:px-10 lg:grid-cols-2 lg:px-20 xl:px-32">
  <div class="flex flex-col justify-center px-4 pt-8">
    <p class="mt-8 text-lg font-medium">Shipping Methods</p>
    <form class="mt-5 grid gap-6">
      <div class="relative">
        <input class="peer hidden" id="radio_1" type="radio" name="radio" checked />
        <span class="absolute right-4 top-1/2 box-content block h-3 w-3 -translate-y-1/2 rounded-full border-8 border-gray-300 bg-white peer-checked:border-gray-700"></span>
        <label class="flex cursor-pointer select-none rounded-lg border border-gray-300 p-4 peer-checked:border-2 peer-checked:border-gray-700 peer-checked:bg-gray-50" for="radio_1">
          <img class="w-14 object-contain" src="/images/naorrAeygcJzX0SyNI4Y0.png" alt="" />
          <div class="ml-5">
            <span class="mt-2 font-semibold">Fedex Delivery</span>
            <p class="text-sm leading-6 text-slate-500">Delivery: 2-4 Days</p>
          </div>
        </label>
      </div>
      <div class="relative">
        <input class="peer hidden" id="radio_2" type="radio" name="radio" checked />
        <span class="absolute right-4 top-1/2 box-content block h-3 w-3 -translate-y-1/2 rounded-full border-8 border-gray-300 bg-white peer-checked:border-gray-700"></span>
        <label class="flex cursor-pointer select-none rounded-lg border border-gray-300 p-4 peer-checked:border-2 peer-checked:border-gray-700 peer-checked:bg-gray-50" for="radio_2">
          <img class="w-14 object-contain" src="/images/oG8xsl3xsOkwkMsrLGKM4.png" alt="" />
          <div class="ml-5">
            <span class="mt-2 font-semibold">Fedex Delivery</span>
            <p class="text-sm leading-6 text-slate-500">Delivery: 2-4 Days</p>
          </div>
        </label>
      </div>
    </form>
  </div>
</div>

<js-component src="ecommerce/shipping_method_radio"></js-component>

Cart Track

View

<li class="after:border-1 flex items-center text-primary-700 after:mx-6 after:hidden after:h-1 after:w-full after:border-b after:border-gray-200 dark:text-primary-500 dark:after:border-gray-700 sm:after:inline-block sm:after:content-[''] md:w-full xl:after:mx-10">
        <span class="flex items-center after:mx-2 after:text-gray-200 after:content-['/'] dark:after:text-gray-500 sm:after:hidden">
          <svg class="me-2 h-4 w-4 sm:h-5 sm:w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
          </svg>
          Checkout
        </span>
      </li>

<li class="flex shrink-0 items-center">
        <svg class="me-2 h-4 w-4 sm:h-5 sm:w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        Order summary
      </li>
    </ol>

<js-component src="ecommerce/track_cart"></js-component>

Place Order Button

View

<js-component src="ecommerce/place_order_button"></js-component>

Checkout Form

View

<div class="w-full h-full max-w-xl mx-auto p-4">
  <h2 class="text-xl font-bold mb-4">Checkout</h2>
  <form class="space-y-4">
    
    <div>
      <h3 class="text-lg font-semibold">Billing Information</h3>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label for="billing-name" class="block text-sm font-medium">Full Name</label>
          <input type="text" id="billing-name" class="w-full border border-gray-300 p-2 rounded-md" placeholder="John Doe" required>
        </div>
        <div>
          <label for="billing-email" class="block text-sm font-medium">Email</label>
          <input type="email" id="billing-email" class="w-full border border-gray-300 p-2 rounded-md" placeholder="email@example.com" required>
        </div>
        <div class="col-span-full">
          <label for="billing-address" class="block text-sm font-medium">Address</label>
          <input type="text" id="billing-address" class="w-full border border-gray-300 p-2 rounded-md" placeholder="123 Main St" required>
        </div>
        <div>
          <label for="billing-city" class="block text-sm font-medium">City</label>
          <input type="text" id="billing-city" class="w-full border border-gray-300 p-2 rounded-md" placeholder="City" required>
        </div>
        <div>
          <label for="billing-zip" class="block text-sm font-medium">ZIP Code</label>
          <input type="text" id="billing-zip" class="w-full border border-gray-300 p-2 rounded-md" placeholder="12345" required>
        </div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold">Shipping Information</h3>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label for="shipping-name" class="block text-sm font-medium">Full Name</label>
          <input type="text" id="shipping-name" class="w-full border border-gray-300 p-2 rounded-md" placeholder="John Doe" required>
        </div>
        <div>
          <label for="shipping-email" class="block text-sm font-medium">Email</label>
          <input type="email" id="shipping-email" class="w-full border border-gray-300 p-2 rounded-md" placeholder="email@example.com" required>
        </div>
        <div class="col-span-full">
          <label for="shipping-address" class="block text-sm font-medium">Address</label>
          <input type="text" id="shipping-address" class="w-full border border-gray-300 p-2 rounded-md" placeholder="123 Main St" required>
        </div>
        <div>
          <label for="shipping-city" class="block text-sm font-medium">City</label>
          <input type="text" id="shipping-city" class="w-full border border-gray-300 p-2 rounded-md" placeholder="City" required>
        </div>
        <div>
          <label for="shipping-zip" class="block text-sm font-medium">ZIP Code</label>
          <input type="text" id="shipping-zip" class="w-full border border-gray-300 p-2 rounded-md" placeholder="12345" required>
        </div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold">Payment Information</h3>
      <div>
        <label for="card-number" class="block text-sm font-medium">Card Number</label>
        <input type="text" id="card-number" class="w-full border border-gray-300 p-2 rounded-md" placeholder="1234 5678 9012 3456" required>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 mt-4">
        <div>
          <label for="card-expiry" class="block text-sm font-medium">Expiry Date</label>
          <input type="text" id="card-expiry" class="w-full border border-gray-300 p-2 rounded-md" placeholder="MM/YY" required>
        </div>
        <div>
          <label for="card-cvc" class="block text-sm font-medium">CVC</label>
          <input type="text" id="card-cvc" class="w-full border border-gray-300 p-2 rounded-md" placeholder="123" required>
        </div>
      </div>
    </div>

<div>
      <button type="submit" class="w-full py-2 px-4 bg-blue-600 text-white font-semibold rounded-md">Complete Purchase</button>
    </div>
  </form>
</div>

<js-component src="ecommerce/checkout_form"></js-component>

Order Summary

View

<js-component src="ecommerce/order_summary"></js-component>

Payment Method Selector

View

<js-component src="ecommerce/payment_method_selector"></js-component>