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

216

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

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

Author:
Abhiraj

1 year ago

1.5k
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)

8 months ago

1.2k
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

8 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

496
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

2 months ago

173
Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

3 months ago

266
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

5 months ago

555
Heading Style

Author:
KULDEEP

8 months ago

508
Responsive Pagination Component with Tailwind CSS
This is a sleek and responsive pagination component built with Tailwind CSS. It features previous and next buttons, numbered pages, and an ellipsis (...) for better navigation when handling large sets of pages. The active page is highlighted with a bold border and color, while the disabled state is styled for clarity. The design is clean, minimal, and fully responsive, making it suitable for modern web applications.

Author:
SHARIFUL ISLAM

11 months ago

1.1k
Info chips with icon

Author:
Bunny

3 years ago

10.2k
Animated Search Input
Expand on focus with smooth animation

Author:
Anonymous

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components