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 v3.4. It is responsive. similar terms for this example is find

Search Bar

Author Sedat Kumcu

Tailwind v3.4 2.4k 2

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

Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

4 weeks ago

65
Search input

Leon Bachmann

3 years ago

11.5k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

10 months ago

686
Responsive search bar

Samuel Dawson

3 years ago

19k
Search form

Laurits

3 years ago

12.3k
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.

Bishnu Thapa

2 years ago

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

Sedat Kumcu

1 year ago

2.7k
Search bar with filter options

Piet Vriend

3 years ago

26.3k
Responsive search bar
with loading animation on submit button

Ron Hicks

3 years ago

12.5k
Animated Search bar
Animated Search bar using tailwind

Muhamad Rufaid kv

1 year ago

1.4k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

4 months ago

472
No distraction search field

_Amar_

3 years ago

12.5k