Update search inputs

This commit is contained in:
khatabwedaa 2021-01-29 12:03:06 +02:00
parent 9eb517d299
commit adeec33f60
3 changed files with 71 additions and 11 deletions

View file

@ -10,7 +10,15 @@
<!-- Search input on desktop screen -->
<div class="mx-10 hidden md:block">
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>
@ -40,7 +48,15 @@
<!-- Search input on mobile screen -->
<div class="mt-3 md:hidden">
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>
</div>
@ -97,7 +113,15 @@
<!-- Search input on desktop screen -->
<div class="mx-10 hidden md:block">
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>
@ -127,7 +151,15 @@
<!-- Search input on mobile screen -->
<div class="mt-3 md:hidden">
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 focus:outline-none focus:bg-white focus:shadow-outline" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>
</div>

View file

@ -25,9 +25,15 @@
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
</div>
<div>
<input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>
@ -68,8 +74,14 @@
<a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
</div>
<div>
<input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
<div class="relative">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
</div>
</div>

View file

@ -4,7 +4,15 @@
<div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
<input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
<div class="relative mt-6">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
<div class="flex flex-col justify-between flex-1 mt-6">
<nav>
@ -81,7 +89,15 @@
<div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
<input class="mt-6 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text" placeholder="Search" />
<div class="relative mt-6">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
</div>
<div class="flex flex-col justify-between flex-1 mt-6">
<nav>