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

256

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

Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

1 year ago

2k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.7k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.3k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

9 months ago

1.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

593
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

3 months ago

286
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

2k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

10 months ago

1.1k
pages / slides

Author:
MD Fardous Alom

1 year ago

1.5k
profile
user profile

Author:
gidy

9 months ago

724
Tailwind Google Map widget

Author:
Dung Vuong

8 months ago

531
Previous and next with icons
Use the following code to show simple previous and next elements with icons. @zobaidulkazi

Author:
zobaidul kaziex

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components