[ Component ]
Biometric Authentication

· fingerprint· modal
Copy as
HTML
JSX
            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-lg bg-white shadow-sm w-96 p-8 flex flex-col items-center text-center"><svg height="75" viewBox="0 0 283.46 283.46" width="75" xmlns="http://www.w3.org/2000/svg" class="text-gray-500 my-4">
      <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8">
        <path d="M22.855 81.087C9.543 107.082 4.61 137.596 10.832 168.451M200.875 21.835c-25.543-12.538-55.271-17.06-85.321-11.001-34.136 6.882-62.593 26.187-81.618 52.257M273.164 115.555c-7.06-35.013-27.189-64.056-54.285-83.07" />
      </g>
      <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8">
        <path d="M275.877 144.695a134.373 134.373 0 00-2.641-29.154M10.904 168.438c.388 1.921.814 3.824 1.279 5.709" />
      </g>
      <path d="M107.454 271.29c29.977-34.119 44.249-81.34 34.579-129.294M119.176 220.338a134.634 134.634 0 01-29.02 45.026" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M126.187 274.896c29.051-37.175 42.302-86.333 32.245-136.205l.052-.017c-1.836-9.104-10.703-14.996-19.807-13.16-9.103 1.836-14.994 10.703-13.159 19.808l.119-.02c3.746 18.581 3.45 37.04-.284 54.465M110.51 156.144c5.245 38.701-9.215 76.082-36.162 101.293" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M178.494 171.434a184.899 184.899 0 00-3.666-36.049l.037-.014c-3.659-18.152-21.34-29.901-39.492-26.24-13.559 2.734-23.546 13.292-26.203 26.027M146.273 275.748c16.744-24.469 27.606-52.939 31.045-83.098" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M145.93 91.898a50.26 50.26 0 00-13.859.85c-27.201 5.485-44.805 31.979-39.32 59.182l.094-.016c7.418 36.792-6.293 72.938-32.779 95.876M167.608 273.324c24.108-41.098 33.776-90.867 23.617-141.246l.024-.01c-3.023-14.988-12.424-27.063-24.807-33.967M72.457 201.992a84.187 84.187 0 01-25.095 34.611" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M209.084 207.06c4.162-25.266 3.9-51.697-1.461-78.287l.01-.007c-7.31-36.25-42.617-59.709-78.865-52.4-36.25 7.31-59.71 42.618-52.4 78.869l.078-.016a83.662 83.662 0 011.197 25.47M190.006 266.909a217.657 217.657 0 0014.582-39.021" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M209.666 92.758c6.883 9.447 11.887 20.496 14.35 32.705l.005.004c9.095 45.104 4.563 89.789-10.744 129.806M107.07 65.952a83.862 83.862 0 0118.393-5.969c25.609-5.163 50.842 1.962 69.588 17.315M36.275 224.05c18.902-15.185 28.896-40.118 23.771-65.524l-.063.014c-6.366-31.567 5.94-62.562 29.315-81.544" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M41.684 145.976a101.15 101.15 0 001.916 15.867l.051-.013c3.752 18.607-3.295 36.881-16.821 48.343M242.69 135.156a256.885 256.885 0 00-2.272-12.994l-.02-.001C229.44 67.813 176.506 32.643 122.16 43.6c-41.765 8.422-72.207 41.635-79.088 81.229M236.983 236.258a249.383 249.383 0 007.931-80.029" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
      <path d="M157.688 25.931c-12.592-1.701-25.675-1.366-38.83 1.287C55.461 40 14.432 101.75 27.215 165.146l.039-.01c2.219 11-1.225 21.823-8.313 29.47M260.104 204.896c3.479-27.945 2.584-56.916-3.289-86.041l-.033.002c-8.693-43.112-40.031-75.878-79.129-88.413" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" />
    </svg>
    <h1 class="text-2xl font-semibold mb-1">Biometrics</h1>
    <p class="text-gray-400 text-sm">Adding Fingerprint authentication provides additional security to your account.</p><button class="mt-6 mb-2 px-4 py-2 rounded-full bg-blue-600 text-white font-medium shadow-xl" style="--tw-shadow: 0 20px 25px -5px rgba(37,99,235, 0.1), 0 10px 10px -5px rgba(37,99,235, 0.04)">Add Fingerprint</button>
  </div>
</div>