mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
34 lines
No EOL
1.2 KiB
HTML
34 lines
No EOL
1.2 KiB
HTML
<!-- From Uiverse.io by mowalee - Tags: simple, input, tailwind, tailwindcss -->
|
|
<div class="flex min-h-screen min-w-full justify-center items-center">
|
|
<div class="w-[250px] relative">
|
|
<input
|
|
class="peer w-full p-4 pt-6 pl-10 pr-4 bg-inherit border-2 rounded-md outline-none transition disabled:opacity-70 disabled:cursor-not-allowed border-gray-500 focus:border-purple-500"
|
|
type="text"
|
|
placeholder=""
|
|
name="username"
|
|
id="username"
|
|
/>
|
|
<label
|
|
class="absolute text-gray-500 text-base duration-150 transform -translate-y-3 top-5 z-10 origin-[0] left-10 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-purple-500"
|
|
for="username"
|
|
>
|
|
Name
|
|
</label>
|
|
<svg
|
|
class="absolute top-6 left-4"
|
|
fill=""
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 344 384"
|
|
>
|
|
<path
|
|
d="M170.5 192q-35.5 0-60.5-25t-25-60.5T110 46t60.5-25T231 46t25 60.5t-25 60.5t-60.5 25zm0 43q31.5 0 69.5 9t69.5 29.5T341 320v43H0v-43q0-26 31.5-46.5T101 244t69.5-9z"
|
|
fill="#6b7280"
|
|
></path>
|
|
</svg>
|
|
<label class="pt-1 block text-gray-500 text-sm"> Text helper </label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|