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

378

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

1 year 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

912
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

861
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

309
Product cards
Product cards for eCommerce

Author:
ehmasuk

1 week ago

52
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.5k
Todo List
A simple tool to track tasks: add, edit, complete, or delete items to stay organized daily.

Author:
Muzammil Riaz

5 months ago

678
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.3k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

8 months ago

1.6k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

5 months ago

587
Product details page
Beautiful product detail page with -multiple images -color options -quantity selection -buy now and add to wishlist buttons

Author:
Dika Rahman

1 year ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components