mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
88 lines
No EOL
3.8 KiB
HTML
88 lines
No EOL
3.8 KiB
HTML
<!-- From Uiverse.io by Itskrish01 - Tags: input, dark, realistic, tailwind, input -->
|
|
<div class="relative group">
|
|
<div
|
|
class="relative w-96 h-16 opacity-90 overflow-hidden rounded-2xl bg-black z-10"
|
|
>
|
|
<div
|
|
class="absolute z-10 -translate-x-44 group-hover:translate-x-[30rem] ease-in transistion-all duration-500 h-full w-44 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12"
|
|
></div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="size-8 text-[#D3CCD4] absolute left-4 top-4 z-[2]"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
|
|
></path>
|
|
</svg>
|
|
<div
|
|
class="absolute overflow-hidden top-[10px] right-3 rounded-xl bg-black p-[2px] z-20 opacity-90"
|
|
>
|
|
<div
|
|
class="absolute group-hover:-left-24 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[12px] -left-8 -top-6"
|
|
></div>
|
|
<div
|
|
class="absolute group-hover:-left-24 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[12px] -left-8 -bottom-6"
|
|
></div>
|
|
<div class="bg-black relative rounded-lg p-1.5">
|
|
<div
|
|
class="absolute group-hover:-left-16 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[16px] -left-8 -top-8"
|
|
></div>
|
|
<div
|
|
class="absolute group-hover:-left-16 transistion-all duration-300 ease-out w-32 h-5 bg-[#a8a0e0] rounded-full blur-[16px] -left-8 -bottom-8"
|
|
></div>
|
|
|
|
<svg
|
|
class="size-7 text-white"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-2xl inset-0.5 bg-black"
|
|
>
|
|
<input
|
|
type="text"
|
|
name="text"
|
|
placeholder="Search..."
|
|
class="input placeholder:text-[#D3CCD4] focus:outline-none h-full opacity-90 w-full px-16 py-3 placeholder:text-xl rounded-2xl bg-black"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="absolute group-hover:-left-[5px] group-hover:-top-[170px] transistion-all duration-300 ease-out w-56 h-48 bg-[#e4a9dd] blur-[20px] -left-[150px] -top-[150px]"
|
|
></div>
|
|
<div
|
|
class="absolute group-hover:-right-[5px] group-hover:-bottom-[170px] transistion-all duration-300 ease-out w-56 h-48 bg-[#ADA2E8] blur-[20px] -right-[150px] -bottom-[150px]"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="absolute w-32 rotate-6 h-10 bg-[#CE25A2] rounded-full blur-[8px] -left-0 top-1"
|
|
></div>
|
|
<div
|
|
class="absolute w-32 rotate-6 h-10 group-hover:w-44 transistion-all duration-300 ease-out bg-[#5241c9] rounded-2xl blur-[10px] -right-0 bottom-1"
|
|
></div>
|
|
<div
|
|
class="absolute w-32 h-14 group-hover:h-6 group-hover:blur-[40px] group-hover:w-56 transistion-all ease-out duration-300 bg-[#CE25A2] rounded-full blur-[50px] -left-5 -top-1"
|
|
></div>
|
|
<div
|
|
class="absolute w-32 h-14 group-hover:h-6 group-hover:blur-[40px] group-hover:w-56 transistion-all ease-out duration-300 bg-[#5241c9] rounded-full blur-[50px] -right-3 -bottom-2"
|
|
></div>
|
|
</div>
|
|
|
|
|
|
|