inputsearch-pillbeginner

Pill Search Bar

A rounded pill-shaped search bar with an embedded search icon and clean focus state.

Preview

<div class="relative max-w-md">
  <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
  <input type="search" placeholder="Search anything..." class="w-full pl-12 pr-4 py-3 bg-gray-100 rounded-full text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all" />
</div>

Color Breakdown

Background

bg-gray-100

#f3f4f6

Icon

text-gray-400

#9ca3af

Text

text-gray-900

#111827

Placeholder

placeholder-gray-500

#6b7280

Focus Ring

focus:ring-blue-500

#3b82f6

Focus Background

focus:bg-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:focus:bg-gray-900

Use Cases

Site-wide search barsCommand palettesFilter inputs

Browser Support

All modern browsers.

Related Recipes

Pill Button

button - beginner

Newsletter Section

section - beginner

Floating Label Input

input - intermediate

Gradient Form

form - intermediate

Dark Form

form - beginner

Toggle Switch

input - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add a keyboard shortcut hint?▼

Add a kbd element on the right side with absolute right-4 top-1/2 -translate-y-1/2 text-xs text-gray-400 bg-gray-200 px-2 py-0.5 rounded.