mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
52 lines
No EOL
1.6 KiB
HTML
52 lines
No EOL
1.6 KiB
HTML
<!-- From Uiverse.io by jubayer-10 - Tags: input -->
|
|
<div class="p-4 flex flex-col w-72 bg-white">
|
|
<label
|
|
class="block mb-0.5 font-medium relative text-slate-700 after:absolute after:content-['*'] after:text-red-500 after:pl-0.5"
|
|
for="email"
|
|
>Email</label
|
|
>
|
|
<input
|
|
required=""
|
|
type="email"
|
|
value="example$gmail.com"
|
|
class="peer w-full h-10 px-3 border outline-none font-semibold shadow-[0px_0px_15px_rgba(0,0,0,0.05)]"
|
|
id="email"
|
|
/>
|
|
<div class="hidden peer-invalid:block">
|
|
<div class="mt-2 flex items-center gap-1">
|
|
<div class="w-4 fill-rose-500">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-name="Layer 1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M24,12A12,12,0,1,1,12,0,12.013,12.013,0,0,1,24,12ZM13,5H11V15h2Zm0,12H11v2h2Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<p class="Capitalize font-medium text-rose-500">Invalid email address</p>
|
|
</div>
|
|
</div>
|
|
<div class="block peer-invalid:hidden">
|
|
<div class="mt-2 flex items-center gap-1">
|
|
<div class="w-4 fill-green-500">
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
data-name="Layer 1"
|
|
id="Layer_1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="m12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm-.091,15.419c-.387.387-.896.58-1.407.58s-1.025-.195-1.416-.585l-2.782-2.696,1.393-1.437,2.793,2.707,5.809-5.701,1.404,1.425-5.793,5.707Z"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<p class="Capitalize font-medium text-green-500">Valid Email Address</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|