Skip to content

Instantly share code, notes, and snippets.

@akirco
Created September 28, 2023 12:16
Show Gist options
  • Save akirco/f565607281b2513c7a53f018c77db3b4 to your computer and use it in GitHub Desktop.
Save akirco/f565607281b2513c7a53f018c77db3b4 to your computer and use it in GitHub Desktop.
use ui and li write a select
<div class="flex items-center justify-center pt-48">
<div
class="inline-flex w-96 items-center justify-between gap-3 rounded-full px-2 text-gray-500 ring ring-indigo-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-search"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<input
class="w-full border-none p-2 outline-none placeholder:text-center"
placeholder="what do you want to watch?"
/>
<span class="rounded-full p-1 text-gray-500 hover:bg-gray-100">
<span class="flex cursor-pointer gap-2">
<p>default</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevrons-up-down"
>
<path d="m7 15 5 5 5-5" />
<path d="m7 9 5-5 5 5" />
</svg>
</span>
<ul class="hidden border-none bg-transparent outline-none">
<li value="" class="border-none bg-white outline-none">Youtube</li>
<li value="" class="border-none bg-white outline-none">Youtube</li>
<li value="" class="border-none bg-white outline-none">Youtube</li>
</ul>
</span>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment