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

647

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