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

1.6k

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

No distraction search field

Author:
_Amar_

2 years ago

12k
Full width search section with title

Author:
TailwindFlex

2 years ago

12k
Search input

Author:
Leon Bachmann

2 years ago

10.7k
Expanding Search Bar
Onclick search bar expands for input

Author:
Nomthandazo Mhlongo

1 year ago

3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Search bar with filter options

Author:
Piet Vriend

2 years ago

25.3k
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

2 years ago

11.6k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

2 years ago

11.1k
Simple search input field

Author:
Santos78

2 years ago

12.6k
Animasyonlu Arama Textbox Widget
Üzerine gelince animasyonlu olarak açılan textbox.

Author:
Sedat Kumcu

11 months ago

1.6k
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

756

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components