32 lines
2.2 KiB
HTML
32 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Meraki UI Components</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<label for="card" class="block text-sm text-gray-500 dark:text-gray-300">Card Number</label>
|
|
|
|
<div class="relative flex items-center mt-2">
|
|
<span class="absolute">
|
|
<svg class="mx-3" width="23" height="14" viewBox="0 0 23 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z" fill="#ED0006"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1792 11.8294C12.6371 10.6005 13.5616 8.77192 13.5616 6.72997C13.5616 4.68801 12.6371 2.85941 11.1792 1.63051C12.3632 0.632465 13.8992 0.0299683 15.5775 0.0299683C19.3224 0.0299683 22.3582 3.02966 22.3582 6.72997C22.3582 10.4303 19.3224 13.43 15.5775 13.43C13.8992 13.43 12.3632 12.8275 11.1792 11.8294Z" fill="#F9A000"/>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1788 11.8294C12.6367 10.6005 13.5611 8.77193 13.5611 6.72999C13.5611 4.68805 12.6367 2.85946 11.1788 1.63055C9.72084 2.85946 8.79639 4.68805 8.79639 6.72999C8.79639 8.77193 9.72084 10.6005 11.1788 11.8294Z" fill="#FF5E00"/>
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<input type="text" placeholder="5555555555554444" class="block w-full py-2.5 text-gray-700 placeholder-gray-400/70 bg-white border border-gray-200 rounded-lg pl-11 pr-5 rtl:pr-11 rtl:pl-5 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |