Home
Sufyan jutt
Content Discovery Platform with Search & Filter

Content Discovery Platform with Search & Filter

A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

This tailwind example is contributed by Sufyan jutt, on 13-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is find

Pagination Search Bar Other Tag Cloud

Author Sufyan jutt

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Content Discovery Platform</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen py-12 px-4">
    <div class="max-w-7xl mx-auto">
        
        <header class="text-center mb-16 fade-in">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Discover Amazing Content</h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Browse through our collection of beautifully designed cards with tags and descriptions.</p>
        </header>

<div class="flex flex-col md:flex-row justify-between items-center mb-10 gap-4 fade-in">
            <div class="relative w-full md:w-1/3">
                <input 
                    type="text" 
                    id="searchInput" 
                    placeholder="Search content..." 
                    class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm"
                >
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
            <div class="flex flex-wrap gap-2" id="filterButtons">
                <button class="filter-btn px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors" data-filter="all">All</button>
                <button class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors" data-filter="design">Design</button>
                <button class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors" data-filter="development">Development</button>
                <button class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors" data-filter="marketing">Marketing</button>
                <button class="filter-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors" data-filter="data">Data Science</button>
            </div>
        </div>

<div class="mb-6 fade-in">
            <p id="resultsCount" class="text-gray-600">Showing <span id="count">6</span> results</p>
        </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="cardsContainer">
            
        </div>

<div id="noResults" class="hidden text-center py-12 fade-in">
            <i class="fas fa-search text-5xl text-gray-300 mb-4"></i>
            <h3 class="text-2xl font-bold text-gray-500 mb-2">No results found</h3>
            <p class="text-gray-500">Try adjusting your search or filter to find what you're looking for.</p>
        </div>

<footer class="mt-16 pt-8 border-t border-gray-200 text-center text-gray-600 fade-in">
            <p>© 2023 Content Discovery Platform. All rights reserved.</p>
        </footer>
    </div>

// DOM elements
        const cardsContainer = document.getElementById('cardsContainer');
        const searchInput = document.getElementById('searchInput');
        const filterButtons = document.querySelectorAll('.filter-btn');
        const resultsCount = document.getElementById('count');
        const noResults = document.getElementById('noResults');

// Current filter state
        let currentFilter = 'all';
        let currentSearch = '';

// Initialize the page
        function init() {
            renderCards(cardsData);
            setupEventListeners();
        }

// Set up event listeners
        function setupEventListeners() {
            // Search input
            searchInput.addEventListener('input', (e) => {
                currentSearch = e.target.value.toLowerCase();
                filterCards();
            });

// Filter buttons
            filterButtons.forEach(button => {
                button.addEventListener('click', (e) => {
                    // Update active button
                    filterButtons.forEach(btn => {
                        btn.classList.remove('bg-blue-500', 'text-white');
                        btn.classList.add('bg-gray-200', 'text-gray-700');
                    });
                    
                    e.target.classList.remove('bg-gray-200', 'text-gray-700');
                    e.target.classList.add('bg-blue-500', 'text-white');
                    
                    // Update filter and re-render
                    currentFilter = e.target.dataset.filter;
                    filterCards();
                });
            });
        }

// Filter cards based on current search and filter
        function filterCards() {
            let filteredCards = cardsData;
            
            // Apply search filter
            if (currentSearch) {
                filteredCards = filteredCards.filter(card => 
                    card.title.toLowerCase().includes(currentSearch) ||
                    card.description.toLowerCase().includes(currentSearch) ||
                    card.tags.some(tag => tag.toLowerCase().includes(currentSearch)) ||
                    card.author.toLowerCase().includes(currentSearch)
                );
            }
            
            // Apply category filter
            if (currentFilter !== 'all') {
                filteredCards = filteredCards.filter(card => 
                    card.tags.some(tag => tag.toLowerCase().includes(currentFilter))
                );
            }
            
            // Update results count
            resultsCount.textContent = filteredCards.length;
            
            // Show/hide no results message
            if (filteredCards.length === 0) {
                noResults.classList.remove('hidden');
            } else {
                noResults.classList.add('hidden');
            }
            
            // Render filtered cards
            renderCards(filteredCards);
        }

// Render cards to the DOM
        function renderCards(cards) {
            cardsContainer.innerHTML = '';
            
            cards.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.className = 'bg-white rounded-xl shadow-md overflow-hidden card-hover fade-in';
                cardElement.innerHTML = `
                    <div class="h-48 bg-gradient-to-r ${card.gradient}"></div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-xl font-bold text-gray-800">${card.title}</h3>
                            <span class="text-yellow-500">
                                <i class="fas fa-star"></i>
                                <span class="ml-1 text-gray-700">${card.rating}</span>
                            </span>
                        </div>
                        <p class="text-gray-600 mb-4">${card.description}</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            ${card.tags.map(tag => `
                                <span class="px-3 py-1 ${getTagColor(tag)} rounded-full text-sm">${formatTag(tag)}</span>
                            `).join('')}
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-300 rounded-full mr-2 flex items-center justify-center text-gray-600">
                                    <i class="fas fa-user"></i>
                                </div>
                                <span class="text-gray-700">${card.author}</span>
                            </div>
                            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">View Details</button>
                        </div>
                    </div>
                `;
                cardsContainer.appendChild(cardElement);
            });
        }

// Helper function to get tag color based on content
        function getTagColor(tag) {
            const tagColors = {
                'design': 'bg-purple-100 text-purple-700',
                'ui/ux': 'bg-indigo-100 text-indigo-700',
                'development': 'bg-blue-100 text-blue-700',
                'javascript': 'bg-yellow-100 text-yellow-700',
                'react native': 'bg-cyan-100 text-cyan-700',
                'data science': 'bg-green-100 text-green-700',
                'python': 'bg-blue-100 text-blue-700',
                'marketing': 'bg-pink-100 text-pink-700',
                'seo': 'bg-orange-100 text-orange-700',
                'social media': 'bg-red-100 text-red-700',
                'html': 'bg-orange-100 text-orange-700',
                'css': 'bg-blue-100 text-blue-700',
                'node.js': 'bg-green-100 text-green-700',
                'expo': 'bg-gray-100 text-gray-700',
                'firebase': 'bg-yellow-100 text-yellow-700',
                'pandas': 'bg-green-100 text-green-700',
                'machine learning': 'bg-purple-100 text-purple-700',
                'aws': 'bg-orange-100 text-orange-700',
                'azure': 'bg-blue-100 text-blue-700',
                'google cloud': 'bg-green-100 text-green-700',
                'content marketing': 'bg-pink-100 text-pink-700',
                'figma': 'bg-purple-100 text-purple-700',
                'prototyping': 'bg-indigo-100 text-indigo-700',
                'data analysis': 'bg-teal-100 text-teal-700',
                'content strategy': 'bg-pink-100 text-pink-700',
                'branding': 'bg-blue-100 text-blue-700'
            };
            
            return tagColors[tag] || 'bg-gray-100 text-gray-700';
        }

// Helper function to format tag for display
        function formatTag(tag) {
            return tag.split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }

// Initialize the application
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>

Related Examples

Fancy underline

Author:
Simon Scheffer

2 years ago

12.1k
Plant Game
Checking to see if it works

Author:
Becky Keyworth

6 months ago

632
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

7 months ago

1.1k
Tag Cloud
Display Trending Topics, Tags, etc.

Author:
Krishna Gudpalle

2 years ago

9.5k
Employee table
Modern Unique and responsive table layout

Author:
Rajesh Maheshwari

8 months ago

2k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Author:
Indra

2 months ago

138
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

4 months ago

646
Search input

Author:
Leon Bachmann

2 years ago

10.7k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12k
Heading Style

Author:
KULDEEP

5 months ago

358
Snake Game tailwind
snake game

Author:
QQ-VVN

6 months ago

549
Responsive pagination with items per page filter
Displays previous and next pagination buttons on mobile devices

Author:
Leif99

2 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components