Skip to Content

Select

Below you can find a Select component styled with tailwindcss.

Preview - Select - Without Label

HTML
<div class="inline-block">
	<div class="flex justify-between text-neutral-600 dark:text-neutral-300 items-center w-fit text-xs border border-neutral-200 rounded gap-1 relative">
		<select class="appearance-none outline-none p-2 pr-6 cursor-pointer z-10 bg-transparent">
			<option value selected>Input placeholder</option>
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</select>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24" class="m-2 right-0 absolute z-0">
			<path d="M12 14L15 10.9999" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M9 11L12 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</div>
React
<div className="inline-block">
	<div className="flex justify-between text-neutral-600 dark:text-neutral-300 items-center w-fit text-xs border border-neutral-200 rounded gap-1 relative">
		<select className="appearance-none outline-none p-2 pr-6 cursor-pointer z-10 bg-transparent">
			<option value selected>Input placeholder</option>
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</select>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24" className="m-2 right-0 absolute z-0">
			<path d="M12 14L15 10.9999" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M9 11L12 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</div>

Preview - Select - With Label

HTML
<div class="inline-block">
	<label class="text-neutral-500 dark:text-neutral-400 text-xs mb-1 block">Label</label>
	<div class="flex justify-between text-neutral-600 dark:text-neutral-300 items-center w-fit text-xs border border-neutral-200 rounded gap-1 relative">
		<select class="appearance-none outline-none p-2 pr-6 cursor-pointer z-10 bg-transparent">
			<option value selected>Input placeholder</option>
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</select>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24" class="m-2 right-0 absolute z-0">
			<path d="M12 14L15 10.9999" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M9 11L12 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</div>
React
<div className="inline-block">
	<label className="text-neutral-500 dark:text-neutral-400 text-xs mb-1 block">Label</label>
	<div className="flex justify-between text-neutral-600 dark:text-neutral-300 items-center w-fit text-xs border border-neutral-200 rounded gap-1 relative">
		<select className="appearance-none outline-none p-2 pr-6 cursor-pointer z-10 bg-transparent">
			<option value selected>Input placeholder</option>
			<option value="option1">Option 1</option>
			<option value="option2">Option 2</option>
			<option value="option3">Option 3</option>
		</select>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24" className="m-2 right-0 absolute z-0">
			<path d="M12 14L15 10.9999" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M9 11L12 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</div>