Back to neobrutalism components
Selects
Neobrutalism-style select components built with Tailwind CSS. Featuring thick borders, hard shadows, and custom dropdown styling. Great for forms, filtering options, and menus with a bold, high-contrast design.
<label for="Headline" class="text-black">
<span class="text-sm font-semibold"> Headliner </span>
<select
name="Headline"
id="Headline"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
>
<option value="">Please select</option>
<option value="JM">John Mayer</option>
<option value="SRV">Stevie Ray Vaughn</option>
<option value="JH">Jimi Hendrix</option>
<option value="BBK">B.B King</option>
<option value="AK">Albert King</option>
<option value="BG">Buddy Guy</option>
<option value="EC">Eric Clapton</option>
</select>
</label>Plugins: @tailwindcss/forms
<label for="Headline" class="text-black dark:text-white">
<span class="text-sm font-semibold"> Headliner </span>
<select
name="Headline"
id="Headline"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:placeholder-white dark:shadow-white dark:focus:ring-yellow-600"
>
<option value="">Please select</option>
<option value="JM">John Mayer</option>
<option value="SRV">Stevie Ray Vaughn</option>
<option value="JH">Jimi Hendrix</option>
<option value="BBK">B.B King</option>
<option value="AK">Albert King</option>
<option value="BG">Buddy Guy</option>
<option value="EC">Eric Clapton</option>
</select>
</label>Plugins: @tailwindcss/forms
<label for="Headline" class="text-black">
<span class="text-sm font-semibold"> Headliner </span>
<select
name="Headline"
id="Headline"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
>
<option value="">Please select</option>
<optgroup label="A">
<option value="AK">Albert King</option>
</optgroup>
<optgroup label="B">
<option value="BBK">B.B King</option>
<option value="BG">Buddy Guy</option>
</optgroup>
<optgroup label="E">
<option value="EC">Eric Clapton</option>
</optgroup>
<optgroup label="J">
<option value="JM">John Mayer</option>
<option value="JH">Jimi Hendrix</option>
</optgroup>
<optgroup label="S">
<option value="SRV">Stevie Ray Vaughn</option>
</optgroup>
</select>
</label>Plugins: @tailwindcss/forms
<label for="Headline" class="text-black dark:text-white">
<span class="text-sm font-semibold"> Headliner </span>
<select
name="Headline"
id="Headline"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:placeholder-white dark:shadow-white dark:focus:ring-yellow-600"
>
<option value="">Please select</option>
<optgroup label="A">
<option value="AK">Albert King</option>
</optgroup>
<optgroup label="B">
<option value="BBK">B.B King</option>
<option value="BG">Buddy Guy</option>
</optgroup>
<optgroup label="E">
<option value="EC">Eric Clapton</option>
</optgroup>
<optgroup label="J">
<option value="JM">John Mayer</option>
<option value="JH">Jimi Hendrix</option>
</optgroup>
<optgroup label="S">
<option value="SRV">Stevie Ray Vaughn</option>
</optgroup>
</select>
</label>Plugins: @tailwindcss/forms
<label for="Headline" class="text-black">
<span class="text-sm font-semibold"> Headliner </span>
<div class="relative">
<input
type="text"
id="Headline"
list="HeadlineList"
placeholder="Please select"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm [&::-webkit-calendar-picker-indicator]:opacity-0"
/>
<span class="absolute inset-y-0 right-0 grid w-8 place-content-center">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="size-4"
>
<path
fill-rule="evenodd"
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<datalist name="Headline" id="HeadlineList">
<option value="JM">John Mayer</option>
<option value="SRV">Stevie Ray Vaughn</option>
<option value="JH">Jimi Hendrix</option>
<option value="BBK">B.B King</option>
<option value="AK">Albert King</option>
<option value="BG">Buddy Guy</option>
<option value="EC">Eric Clapton</option>
</datalist>
</label>Plugins: @tailwindcss/forms
<label for="Headline" class="text-black dark:text-white">
<span class="text-sm font-semibold"> Headliner </span>
<div class="relative">
<input
type="text"
id="Headline"
list="HeadlineList"
placeholder="Please select"
class="mt-0.5 w-full border-2 border-black bg-white placeholder-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:placeholder-white dark:shadow-white dark:focus:ring-yellow-600 [&::-webkit-calendar-picker-indicator]:opacity-0"
/>
<span class="absolute inset-y-0 right-0 grid w-8 place-content-center">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="size-4"
>
<path
fill-rule="evenodd"
d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<datalist name="Headline" id="HeadlineList">
<option value="JM">John Mayer</option>
<option value="SRV">Stevie Ray Vaughn</option>
<option value="JH">Jimi Hendrix</option>
<option value="BBK">B.B King</option>
<option value="AK">Albert King</option>
<option value="BG">Buddy Guy</option>
<option value="EC">Eric Clapton</option>
</datalist>
</label>Plugins: @tailwindcss/forms