Home
Rathanak Phan
Modern website that provides software services

Modern website that provides software services

The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

This tailwind example is contributed by Rathanak Phan, on 12-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other eCommerce

Author Rathanak Phan

295

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code/Share - Open-Source Software Platform</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="style.css">
</head>
<body class="min-h-screen">
    
    <header class="sticky top-0 z-50 shadow-md transition-colors duration-300 bg-white dark:bg-gray-800">
        <nav class="container mx-auto px-4 py-4 flex flex-col sm:flex-row justify-between items-center">
            <div class="flex items-center justify-between w-full sm:w-auto">
                <a href="#" class="text-3xl font-extrabold flex items-center gap-2">
                    <span class="text-indigo-600 dark:text-cyan-500">
                        &lt;Code/Share&gt;
                    </span>
                </a>
                <button id="theme-toggle-mobile" class="sm:hidden p-2 rounded-full transition-colors duration-300 bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-label="Toggle theme">
                    
                    <svg class="h-6 w-6 theme-icon light-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display: none;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.325 3.325l-.707.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    
                    <svg class="h-6 w-6 theme-icon dark-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z" />
                    </svg>
                </button>
            </div>
            <div class="flex flex-col sm:flex-row items-center mt-4 sm:mt-0 space-y-2 sm:space-y-0 sm:space-x-8 text-lg font-medium">
                <a href="#home" class="hover:text-opacity-80 transition-colors duration-200 text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-cyan-400">Home</a>
                <a href="#projects" class="hover:text-opacity-80 transition-colors duration-200 text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-cyan-400">Projects</a>
                <a href="#categories" class="hover:text-opacity-80 transition-colors duration-200 text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-cyan-400">Categories</a>
                <a href="#about" class="hover:text-opacity-80 transition-colors duration-200 text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-cyan-400">About</a>
                <a href="#contact" class="hover:text-opacity-80 transition-colors duration-200 text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-cyan-400">Contact</a>
                <button id="theme-toggle-desktop" class="hidden sm:block p-2 rounded-full transition-colors duration-300 bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-800" aria-label="Toggle theme">
                    
                    <svg class="h-6 w-6 theme-icon light-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="display: none;">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.325 3.325l-.707.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    
                    <svg class="h-6 w-6 theme-icon dark-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z" />
                    </svg>
                </button>
            </div>
        </nav>
    </header>

<main class="container mx-auto px-4 py-8">
        
        <section id="home" class="rounded-2xl p-8 mb-12 shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-700">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-5xl font-extrabold mb-4 leading-tight hero-title-light dark:hero-title-dark">
                    Unlock Open-Source Potential
                </h1>
                <p class="text-xl mb-6 text-gray-700 dark:text-gray-300">
                    Dive into a world of free tools, source code, and comprehensive documentation to elevate your development journey.
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#projects" class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg font-semibold transition-transform duration-300 ease-out transform hover:scale-105 bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-500/50 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:shadow-cyan-500/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-cyan-500 dark:focus:ring-offset-gray-800">
                        Explore Projects
                    </a>
                    <a href="#contact" class="inline-flex items-center justify-center px-8 py-3 rounded-full text-lg font-semibold transition-transform duration-300 ease-out transform hover:scale-105 border border-indigo-500 text-indigo-600 hover:bg-indigo-500 hover:text-white dark:border-blue-500 dark:text-blue-300 dark:hover:bg-blue-700 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500 dark:focus:ring-offset-gray-800">
                        Contact Us
                    </a>
                </div>
            </div>
        </section>

<section class="mb-12">
            <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                
                <div class="relative w-full md:w-1/2">
                    <input type="text" id="search-input" placeholder="Search projects by name, tag, or tech..." class="w-full px-5 py-3 pr-12 rounded-full border-2 transition-colors duration-300 bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500 focus:outline-none focus:ring-1 shadow-sm">
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                        
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                        </svg>
                    </div>
                </div>

<div class="relative w-full md:w-1/2">
                    <select id="category-filter" class="block w-full px-5 py-3 rounded-full border-2 appearance-none cursor-pointer transition-colors duration-300 bg-white border-gray-300 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:border-cyan-500 dark:focus:ring-cyan-500 focus:outline-none focus:ring-1 shadow-sm">
                        <option value="All">All Categories</option>
                        <option value="Web Development">Web Development</option>
                        <option value="Mobile Apps">Mobile Apps</option>
                        <option value="Machine Learning">Machine Learning</option>
                        <option value="Data Science">Data Science</option>
                        <option value="Utilities">Utilities</option>
                        <option value="Educational Tools">Educational Tools</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
                        
                        <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </div>
                </div>
            </div>
        </section>

<section id="projects" class="mb-12">
            <h2 class="text-4xl font-bold mb-8 text-center text-indigo-700 dark:text-cyan-400">
                Our Latest Projects
            </h2>
            <div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
            </div>
            <p id="no-projects-message" class="text-center text-xl text-gray-600 dark:text-gray-400 mt-8" style="display: none;">
                No projects found matching your criteria.
            </p>
        </section>

<section id="categories" class="mb-12">
            <h2 class="text-4xl font-bold mb-8 text-center text-indigo-700 dark:text-cyan-400">
                Browse by Categories
            </h2>
            <div id="category-buttons" class="flex flex-wrap justify-center gap-4">
                
            </div>
        </section>

<section id="about" class="rounded-2xl p-8 mb-12 shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-700">
            <h2 class="text-4xl font-bold mb-6 text-center hero-title-light dark:hero-title-dark">
                About Us
            </h2>
            <div class="text-lg leading-relaxed max-w-4xl mx-auto text-gray-700 dark:text-gray-300">
                <p class="mb-4">
                    Our mission is to empower students, developers, and the open-source community by providing a centralized platform for free and high-quality software services. We believe in the power of shared knowledge and collaborative development.
                </p>
                <p class="mb-4">
                    Here, you'll find a curated collection of open-source projects, ready-to-use code snippets, and insightful documentation covering a wide range of programming languages and technologies. Whether you're learning, building, or contributing, Code/Share is your go-to resource.
                </p>
                <p>
                    Join us in fostering innovation and making technology accessible to everyone.
                </p>
            </div>
        </section>

<section id="contact" class="rounded-2xl p-8 mb-12 shadow-xl transition-all duration-300 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-700">
            <h2 class="text-4xl font-bold mb-6 text-center hero-title-light dark:hero-title-dark">
                Get in Touch
            </h2>
            <div class="text-lg leading-relaxed max-w-2xl mx-auto text-center text-gray-700 dark:text-gray-300">
                <p class="mb-4">
                    Have questions, feedback, or want to submit your own project? We'd love to hear from you!
                </p>
                <p class="mb-6">
                    You can reach us via email at <a href="mailto:info@codeshare.com" class="font-semibold underline transition-colors duration-200 text-indigo-600 hover:text-indigo-500 dark:text-cyan-400 dark:hover:text-cyan-300">info@codeshare.com</a> or connect with us on social media.
                </p>
                <form class="space-y-4">
                    <div>
                        <label for="name" class="sr-only">Name</label>
                        <input type="text" id="name" placeholder="Your Name" class="w-full px-4 py-3 rounded-lg border-2 transition-colors duration-300 bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500">
                    </div>
                    <div>
                        <label for="email" class="sr-only">Email</label>
                        <input type="email" id="email" placeholder="Your Email" class="w-full px-4 py-3 rounded-lg border-2 transition-colors duration-300 bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500">
                    </div>
                    <div>
                        <label for="message" class="sr-only">Message</label>
                        <textarea id="message" rows="5" placeholder="Your Message" class="w-full px-4 py-3 rounded-lg border-2 transition-colors duration-300 bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500"></textarea>
                    </div>
                    <button type="submit" class="w-full px-6 py-3 rounded-full text-lg font-semibold transition-transform duration-300 ease-out transform hover:scale-105 bg-indigo-600 hover:bg-indigo-700 text-white shadow-lg shadow-indigo-500/50 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:shadow-cyan-500/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-cyan-500 dark:focus:ring-offset-gray-800">
                        Send Message
                    </button>
                </form>
            </div>
        </section>
    </main>

<footer class="py-8 transition-colors duration-300 bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
        <div class="container mx-auto px-4 text-center">
            <div class="flex justify-center space-x-6 mb-4">
                <a href="#" class="hover:scale-110 transition-transform duration-200 text-gray-600 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-cyan-400" aria-label="GitHub">
                    
                    <svg fill="currentColor" viewBox="0 0 24 24" class="h-7 w-7"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.498.09.668-.215.668-.477 0-.237-.014-1.033-.014-2.022-2.782.6-3.369-1.345-3.369-1.345-.454-1.158-1.11-1.464-1.11-1.464-.908-.618.069-.606.069-.606 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.39-1.979 1.029-2.679-.103-.252-.446-1.266.098-2.673 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.408.202 2.42.099 2.673.64.7 1.028 1.591 1.028 2.679 0 3.827-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.334-.014 2.41-.014 2.727 0 .263.167.572.676.475C21.137 20.19 24 16.425 24 12.017 24 6.484 19.522 2 14 2Z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="hover:scale-110 transition-transform duration-200 text-gray-600 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-cyan-400" aria-label="Twitter">
                    
                    <svg fill="currentColor" viewBox="0 0 24 24" class="h-7 w-7"><path d="M22.162 5.65C21.403 5.986 20.607 6.216 19.782 6.311 20.655 5.8 21.328 5.011 21.644 4.053 20.825 4.544 19.92 4.887 18.966 5.07C18.17 4.238 17.07 3.73 15.895 3.73c-2.316 0-4.19 1.874-4.19 4.19 0 .328.037.646.108.95C7.382 8.683 4.135 7 1.954 4.239c-.358.614-.564 1.328-.564 2.098 0 1.45.738 2.73 1.862 3.483-.683-.022-1.325-.21-1.89-.523v.053c0 2.03 1.442 3.722 3.354 4.103-.35.097-.72.15-1.102.15-.27 0-.533-.027-.79-.074.53 1.66 2.072 2.872 3.89 2.906-1.43 1.12-3.23 1.79-5.185 1.79-.337 0-.668-.02-.99-.058C3.898 19.14 6.082 20 8.447 20c7.042 0 10.887-5.82 10.887-10.887 0-.166-.004-.33-.012-.493.75-.542 1.4-1.217 1.91-1.984Z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="hover:scale-110 transition-transform duration-200 text-gray-600 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-cyan-400" aria-label="LinkedIn">
                    
                    <svg fill="currentColor" viewBox="0 0 24 24" class="h-7 w-7"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" /></svg>
                </a>
            </div>
            <p class="text-sm">
                &copy; <span id="current-year"></span> Code/Share. All rights reserved.
            </p>
        </div>
    </footer>

// Mock Project Data
const mockProjects = [
    {
        id: '1',
        title: 'Realtime Chat App',
        description: 'A responsive chat application built with React and Firebase, featuring real-time messaging, user authentication, and group chats.',
        language: 'React, Firebase',
        tags: ['Web Development', 'Realtime', 'Communication'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'MIT License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Chat+App'
    },
    {
        id: '2',
        title: 'Image Recognition API',
        description: 'A Python Flask API for performing image recognition using pre-trained deep learning models. Supports various image formats.',
        language: 'Python, Flask, TensorFlow',
        tags: ['Machine Learning', 'AI', 'API'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'GPLv3 License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Image+Recognition'
    },
    {
        id: '3',
        title: 'Mobile Task Manager',
        description: 'A cross-platform mobile application for managing daily tasks and to-do lists, built with React Native. Includes reminders and categorization.',
        language: 'React Native',
        tags: ['Mobile Apps', 'Productivity', 'Cross-platform'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'MIT License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Task+Manager'
    },
    {
        id: '4',
        title: 'Data Visualization Dashboard',
        description: 'An interactive web dashboard for visualizing complex datasets using D3.js. Features customizable charts and filters.',
        language: 'JavaScript, D3.js',
        tags: ['Data Science', 'Web Development', 'Visualization'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'Apache 2.0 License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Data+Viz'
    },
    {
        id: '5',
        title: 'Simple Calculator Utility',
        description: 'A basic desktop calculator application built with Electron. Provides standard arithmetic operations in a clean interface.',
        language: 'Electron, JavaScript',
        tags: ['Utilities', 'Desktop App'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'MIT License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Calculator'
    },
    {
        id: '6',
        title: 'Educational Quiz App',
        description: 'A web-based quiz application for students, covering various subjects. Features multiple-choice questions and score tracking.',
        language: 'HTML, CSS, JavaScript',
        tags: ['Educational Tools', 'Web Development'],
        downloadLink: '#',
        liveDemoLink: '#',
        license: 'MIT License',
        imageUrl: 'https://placehold.co/400x250/F0F0F0/000000?text=Quiz+App'
    },
];

const allCategories = ['All', 'Web Development', 'Mobile Apps', 'Machine Learning', 'Data Science', 'Utilities', 'Educational Tools'];

// DOM Elements
const themeToggleButtons = document.querySelectorAll('#theme-toggle-mobile, #theme-toggle-desktop');
const themeIconsLight = document.querySelectorAll('.theme-icon.light-icon');
const themeIconsDark = document.querySelectorAll('.theme-icon.dark-icon');
const htmlElement = document.documentElement;
const searchInput = document.getElementById('search-input');
const categoryFilterSelect = document.getElementById('category-filter');
const projectsGrid = document.getElementById('projects-grid');
const noProjectsMessage = document.getElementById('no-projects-message');
const categoryButtonsContainer = document.getElementById('category-buttons');
const currentYearSpan = document.getElementById('current-year');

let currentTheme = localStorage.getItem('theme') || 'light';
let selectedCategory = 'All';
let searchTerm = '';

/**
 * Applies the selected theme to the HTML document.
 * @param {string} theme - 'light' or 'dark'
 */
function applyTheme(theme) {
    if (theme === 'dark') {
        htmlElement.classList.add('dark');
        themeIconsLight.forEach(icon => icon.style.display = 'block');
        themeIconsDark.forEach(icon => icon.style.display = 'none');
    } else {
        htmlElement.classList.remove('dark');
        themeIconsLight.forEach(icon => icon.style.display = 'none');
        themeIconsDark.forEach(icon => icon.style.display = 'block');
    }
    localStorage.setItem('theme', theme);
    currentTheme = theme;
}

/**
 * Toggles the theme between light and dark.
 */
function toggleTheme() {
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    applyTheme(newTheme);
}

// Event listeners for theme toggle buttons
themeToggleButtons.forEach(button => {
    button.addEventListener('click', toggleTheme);
});

/**
 * Creates an HTML string for a single project card.
 * @param {object} project - The project data object.
 * @returns {string} - HTML string for the project card.
 */
function createProjectCardHtml(project) {
    const isDark = htmlElement.classList.contains('dark');
    const cardBg = isDark ? 'bg-gray-800' : 'bg-white';
    const cardText = isDark ? 'text-gray-100' : 'text-gray-900';
    const cardHoverShadow = isDark ? 'hover:shadow-cyan-500/50' : 'hover:shadow-indigo-500/50';
    const gradientFrom = isDark ? 'from-cyan-700' : 'from-indigo-400';
    const gradientTo = isDark ? 'to-blue-800' : 'to-purple-500';
    const descriptionText = isDark ? 'text-gray-300' : 'text-gray-600';
    const techLicenseText = isDark ? 'text-gray-400' : 'text-gray-500';
    const tagBg = isDark ? 'bg-blue-600' : 'bg-indigo-100';
    const tagText = isDark ? 'text-white' : 'text-indigo-800';
    const downloadBtnBg = isDark ? 'bg-cyan-600 hover:bg-cyan-700 shadow-cyan-500/40' : 'bg-indigo-600 hover:bg-indigo-700 shadow-indigo-500/40';
    const downloadBtnFocusRing = isDark ? 'focus:ring-cyan-500 focus:ring-offset-gray-800' : 'focus:ring-indigo-500 focus:ring-offset-white';
    const demoBtnBorder = isDark ? 'border-blue-500' : 'border-indigo-500';
    const demoBtnText = isDark ? 'text-blue-300' : 'text-indigo-600';
    const demoBtnHoverBg = isDark ? 'hover:bg-blue-700' : 'hover:bg-indigo-500';
    const demoBtnHoverText = isDark ? 'hover:text-white' : 'hover:text-white';
    const demoBtnFocusRing = isDark ? 'focus:ring-blue-500 focus:ring-offset-gray-800' : 'focus:ring-indigo-500 focus:ring-offset-white';

return `
        <div class="relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ${cardBg} ${cardText} ${cardHoverShadow} transform hover:-translate-y-1 hover:scale-105 group">
            <div class="absolute inset-0 bg-gradient-to-br transition-opacity duration-300 opacity-0 group-hover:opacity-20 ${gradientFrom} ${gradientTo}"></div>
            <img src="${project.imageUrl}" alt="${project.title}" class="w-full h-48 object-cover rounded-t-xl transition-transform duration-300 group-hover:scale-110" onerror="this.onerror=null;this.src='https://placehold.co/400x250/F0F0F0/000000?text=No+Image';">
            <div class="p-6 relative z-10">
                <h3 class="text-2xl font-bold mb-2 truncate">${project.title}</h3>
                <p class="text-sm mb-4 ${descriptionText} line-clamp-3">${project.description}</p>
                <div class="flex flex-wrap gap-2 mb-4">
                    ${project.tags.map(tag => `
                        <span class="px-3 py-1 text-xs font-semibold rounded-full ${tagBg} ${tagText}">
                            ${tag}
                        </span>
                    `).join('')}
                </div>
                <p class="text-sm ${techLicenseText} mb-2">
                    <strong class="font-semibold">Tech:</strong> ${project.language}
                </p>
                <p class="text-sm ${techLicenseText} mb-4">
                    <strong class="font-semibold">License:</strong> ${project.license}
                </p>
                <div class="flex justify-between items-center mt-auto">
                    <a href="${project.downloadLink}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-5 py-2 rounded-lg font-medium transition-colors duration-300 ${downloadBtnBg} text-white focus:outline-none focus:ring-2 focus:ring-offset-2 ${downloadBtnFocusRing}">
                        Download
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                    </a>
                    ${project.liveDemoLink ? `
                        <a href="${project.liveDemoLink}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-300 border ${demoBtnBorder} ${demoBtnText} ${demoBtnHoverBg} ${demoBtnHoverText} focus:outline-none focus:ring-2 focus:ring-offset-2 ${demoBtnFocusRing}">
                            Live Demo
                        </a>
                    ` : ''}
                </div>
            </div>
        </div>
    `;
}

/**
 * Renders the projects based on current search term and selected category.
 */
function renderProjects() {
    const filteredProjects = mockProjects.filter(project => {
        const matchesSearch = project.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                              project.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())) ||
                              project.language.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesCategory = selectedCategory === 'All' || project.tags.includes(selectedCategory);
        return matchesSearch && matchesCategory;
    });

projectsGrid.innerHTML = ''; // Clear existing projects
    if (filteredProjects.length > 0) {
        filteredProjects.forEach(project => {
            projectsGrid.insertAdjacentHTML('beforeend', createProjectCardHtml(project));
        });
        noProjectsMessage.style.display = 'none';
    } else {
        noProjectsMessage.style.display = 'block';
    }
}

/**
 * Renders the category filter buttons.
 */
function renderCategoryButtons() {
    categoryButtonsContainer.innerHTML = ''; // Clear existing buttons
    allCategories.filter(cat => cat !== 'All').forEach(category => {
        const isSelected = selectedCategory === category;
        const buttonClass = `
            px-6 py-3 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105
            ${isSelected
                ? (currentTheme === 'dark' ? 'bg-cyan-600 text-white shadow-md shadow-cyan-500/40' : 'bg-indigo-600 text-white shadow-md shadow-indigo-500/40')
                : (currentTheme === 'dark' ? 'bg-gray-700 text-gray-300 hover:bg-gray-600' : 'bg-gray-200 text-gray-700 hover:bg-gray-300')
            }
            focus:outline-none focus:ring-2 focus:ring-offset-2
            ${currentTheme === 'dark' ? 'focus:ring-cyan-500 focus:ring-offset-gray-800' : 'focus:ring-indigo-500 focus:ring-offset-white'}
        `;
        const button = document.createElement('button');
        button.classList.add(...buttonClass.split(' '));
        button.textContent = category;
        button.addEventListener('click', () => {
            selectedCategory = category;
            categoryFilterSelect.value = category; // Update select dropdown
            renderProjects();
            renderCategoryButtons(); // Re-render buttons to update active state
        });
        categoryButtonsContainer.appendChild(button);
    });
}

// Event listeners for search and filter
searchInput.addEventListener('input', (e) => {
    searchTerm = e.target.value;
    renderProjects();
});

categoryFilterSelect.addEventListener('change', (e) => {
    selectedCategory = e.target.value;
    renderProjects();
    renderCategoryButtons(); // Update active state of buttons
});

// Initialize on DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
    // Set current year in footer
    currentYearSpan.textContent = new Date().getFullYear();

// Apply initial theme
    applyTheme(currentTheme);

// Render projects and category buttons
    renderProjects();
    renderCategoryButtons();
});

</script>

</body>
</html>

Related Examples

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

11 months ago

3.5k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

6 months ago

779
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

4 months ago

839
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

6 months ago

775
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

7 months ago

478
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

2 years ago

7.1k
Chatbox template

Author:
Lucas Martinez

2 years ago

12.3k
Simple count down timer

Author:
Gopi Yadav

2 years ago

15k
Soft Lights & Slow Beats
Sink into the tranquil rhythms of a Sunday afternoon. This playlist blends soft melodies and gentle beats to create a mysterious yet comforting atmosphere — perfect for relaxing, reflecting, or simply unwinding as the day fades away.

Author:
Bonimater

4 months ago

192
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
404 Page Not Found

Author:
KULDEEP

3 months ago

731

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components