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

search button

Freja Jensen

3 years ago

13.2k
Search bar

Arya

3 years ago

33k
Simple search bar

TailwindFlex

4 years ago

12.7k
CTA Search Section
CTA search form

EliteAI Tools

1 year ago

1.7k
Search bar with filter options

Piet Vriend

3 years ago

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

s c

1 year ago

1.8k
Animated Search bar
Animated Search bar using tailwind

Muhamad Rufaid kv

1 year ago

1.5k
Search input

Leon Bachmann

3 years ago

11.5k
ULTIMATE SNAKE
(click to https://quantum-snake.netlify.app/ )ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k
Search form section with a background SVG gradient

TailwindFlex

3 years ago

15.2k
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

5 months ago

600
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k