Home
Sedat Kumcu
Arama Sonuçları Sayfası

Arama Sonuçları Sayfası

Sayfa içerik türüne göre icon ile desteklenen arama formu ve arama sonuçları sayfası

This tailwind example is contributed by Sedat Kumcu, on 05-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is find

Search Bar

Author Sedat Kumcu

2.1k

Fork Fullscreen

<div class="min-h-screen bg-gray-100 p-8">
    
    <div class="bg-white p-6 rounded-lg shadow-lg max-w-2xl mx-auto mb-8">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Arama Yap</h2>
        <div class="flex">
            <input type="text" placeholder="Anahtar kelimeler..." class="w-full p-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <button class="bg-indigo-500 text-white px-6 py-3 rounded-r-lg hover:bg-indigo-600 transition-colors">Ara</button>
        </div>
    </div>

<div class="max-w-2xl mx-auto">
        
        <div class="bg-white p-4 rounded-lg shadow-md mb-4 flex items-start">
            
            <div class="text-indigo-500 flex-shrink-0 mr-4">
                
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 5h-2a2 2 0 00-2 2v2a2 2 0 002 2h2v2a2 2 0 01-2 2h-2a2 2 0 00-2 2v2h-2a2 2 0 00-2-2v-2a2 2 0 00-2-2H5a2 2 0 01-2-2V9a2 2 0 012-2h2a2 2 0 002-2V5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2h2V5z" />
                </svg>
            </div>
            
            <div>
                
                <a href="#" class="text-lg font-semibold text-indigo-600 hover:underline">İçerik Başlığı Buraya</a>
                
                <p class="text-gray-600 mt-1">Bu bir örnek açıklamadır ve bu açıklama özeti göstermek için kısaltılmıştır...</p>
                
                <p class="text-sm text-gray-500 mt-2">2024-04-10 &bullet; Blog</p>
            </div>
        </div>

<div class="bg-white p-4 rounded-lg shadow-md mb-4 flex items-start">
            <div class="text-indigo-500 flex-shrink-0 mr-4">
                
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4-4-4-4M16 4l4 4-4 4M4 8h16v8H4V8z" />
                </svg>
            </div>
            <div>
                <a href="#" class="text-lg font-semibold text-indigo-600 hover:underline">Fotoğraf İçeriği</a>
                <p class="text-gray-600 mt-1">Bu bir fotoğraf içeriği açıklaması...</p>
                <p class="text-sm text-gray-500 mt-2">2024-04-22 &bullet; Fotoğraf</p>
            </div>
        </div>

</div>
</div>

Related Examples

Responsive search bar

Author:
Samuel Dawson

3 years ago

18.2k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

7.8k
Search bar with icon

Author:
Steven Kuhn

3 years ago

15.3k
No distraction search field

Author:
_Amar_

2 years ago

12.2k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

3 years ago

11.9k
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

847
Search input

Author:
Leon Bachmann

3 years ago

10.9k
Search bar with select
search bar like google with select filter

Author:
Cristian

1 year ago

3.7k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

1 year ago

3.5k
Search bar with select
search bar like google with select filter

Author:
s c

11 months ago

1.1k
Glassmorphic Animated Searchabar
This is a sleek, animated search bar designed with Tailwind CSS using a glassmorphic aesthetic. It features a semi-transparent background with a blur effect to create a frosted-glass look. When focused, the search bar smoothly expands to enhance user interaction. It includes a built-in search icon and fully supports responsive design, making it ideal for modern, visually polished web interfaces.

Author:
Muhamad Rufaid kv

8 months ago

1.2k
Simple search input field

Author:
Santos78

3 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components