Select
Below you can find a Select component styled with tailwindcss.
Select - Without Label
- Preview
- HTML
- React
Copy
<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 bg-transparent">
<option>Input placeholder</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<svg class="m-2 right-0 absolute z-0" fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M12 14L15 10.9999"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M9 11L12 14"></path>
</svg>
</div>
</div>
Copy
<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 bg-transparent">
<option>Input placeholder</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<svg className="m-2 right-0 absolute z-0" fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M12 14L15 10.9999"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M9 11L12 14"></path>
</svg>
</div>
</div>Select - With Label
- Preview
- HTML
- React
Copy
<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 bg-transparent">
<option>Input placeholder</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<svg class="m-2 right-0 absolute z-0" fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M12 14L15 10.9999"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M9 11L12 14"></path>
</svg>
</div>
</div>
Copy
<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 bg-transparent">
<option>Input placeholder</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<svg className="m-2 right-0 absolute z-0" fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M12 14L15 10.9999"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="currentColor" d="M9 11L12 14"></path>
</svg>
</div>
</div>