HTML 代码
<form class="flex items-center w-full max-w-md mx-auto">
<label for="search" class="sr-only">Search</label>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="text" id="search"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-stone-500 focus:border-stone-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-stone-500 dark:focus:border-stone-500"
placeholder="Search..." required>
</div>
<button type="submit"
class="p-2.5 ml-2 text-sm font-medium text-white bg-stone-700 rounded-lg border border-stone-700 hover:bg-stone-800 focus:ring-4 focus:outline-none focus:ring-stone-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:focus:ring-stone-800">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<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>
</button>
</form>相关组件
材料设计搜索框
一个受材料设计原则启发的搜索框组件，使用 Tailwind CSS 构建。它具有响应式行为，能够适应容器宽度，通过悬停和聚焦阴影过渡（深度效果）提供视觉反馈，并全面支持黑暗主题。该组件包括一个领先的搜索图标，并确保干净、现代的美学。仅使用 CSS 实现。由于其 `w-full` 特性，非常适合嵌入各种布局。为确保无障碍，确保将 `input` 元素与相应的 `<label>` 配对，或提供描述性的 `aria-label` 。