Mfuranziza Hamza

Mfuranziza Hamza full development

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 28-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card,Toast, Snackbar,Front page

Breadcrumb Product Notification Landing Page

Author Code Master(Mfuranziza Dusabe Hamza)

261

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samuel Abera | Full-Stack Developer</title>
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <style>
        /* Custom CSS Variables */
        :root {
            --primary: #10b981;
            --primary-dark: #059669;
            --secondary: #1f2937;
            --light: #f9fafb;
            --dark: #111827;
            --transition: all 0.3s ease;
        }

/* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            overflow-x: hidden;
            transition: background-color 0.3s ease;
        }

body.light-mode {
            background-color: var(--light);
            color: var(--dark);
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

/* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(17, 24, 39, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            transition: var(--transition);
        }

body.light-mode nav {
            background-color: rgba(249, 250, 251, 0.95);
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            display: flex;
            align-items: center;
        }

.logo span {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: bold;
            border-radius: 50%;
            margin-right: 0.25rem;
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links li {
            list-style: none;
            position: relative;
        }

.nav-links a {
            color: inherit;
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }

.nav-links a:hover {
            color: var(--primary);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: var(--transition);
        }

.nav-links a:hover::after {
            width: 100%;
        }

.nav-cta {
            background-color: var(--primary);
            color: var(--dark);
            padding: 0.5rem 1.5rem;
            border-radius: 0.375rem;
            font-weight: bold;
            text-decoration: none;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

.nav-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }

.nav-cta:hover::before {
            left: 100%;
        }

.nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

.mobile-nav-toggle {
            display: none;
            background: transparent;
            border: none;
            color: inherit;
            font-size: 1.5rem;
            cursor: pointer;
        }

/* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 5rem;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: -10%;
            right: -10%;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(var(--primary), transparent);
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

.hero::after {
            content: '';
            position: absolute;
            bottom: -10%;
            left: -10%;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(var(--primary), transparent);
            opacity: 0.1;
            animation: float 8s ease-in-out infinite;
        }

.hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

.hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

.hero-text .highlight {
            color: var(--primary);
            position: relative;
            display: inline-block;
        }

.hero-text .highlight::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: var(--primary);
            opacity: 0.2;
            z-index: -1;
        }

.hero-text p {
            font-size: 1.125rem;
            margin-bottom: 2rem;
            color: #d1d5db;
        }

body.light-mode .hero-text p {
            color: #4b5563;
        }

.hero-cta {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

.btn {
            padding: 0.75rem 2rem;
            border-radius: 0.375rem;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

.btn-primary {
            background-color: var(--primary);
            color: var(--dark);
        }

.btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

.btn-secondary {
            background-color: transparent;
            color: inherit;
            border: 2px solid var(--primary);
        }

.btn-secondary:hover {
            background-color: var(--primary);
            color: var(--dark);
        }

.hero-stats {
            display: flex;
            gap: 2rem;
        }

.stat-item {
            display: flex;
            flex-direction: column;
        }

.stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
        }

.stat-label {
            font-size: 0.875rem;
            color: #9ca3af;
        }

body.light-mode .stat-label {
            color: #6b7280;
        }

.hero-image {
            position: relative;
        }

.hero-image img {
            width: 100%;
            border-radius: 1rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transition: var(--transition);
        }

.hero-image:hover img {
            transform: translateY(-5px);
        }

.floating-card {
            position: absolute;
            background-color: var(--primary);
            color: var(--dark);
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            animation: float 3s ease-in-out infinite;
        }

.floating-card svg {
            width: 1.5rem;
            height: 1.5rem;
        }

.card-1 {
            top: 10%;
            left: -10%;
            animation-delay: 0s;
        }

.card-2 {
            top: 50%;
            right: -10%;
            animation-delay: 1s;
        }

.card-3 {
            bottom: 20%;
            left: -5%;
            animation-delay: 2s;
        }

/* Theme Toggle */
        .theme-toggle {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: var(--primary);
            color: var(--dark);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: var(--transition);
        }

.theme-toggle:hover {
            transform: scale(1.1);
        }

/* Animations */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

@keyframes ping {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }

.animate-ping {
            animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
        }

/* Responsive Design */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
            }

.hero-text h1 {
                font-size: 2.5rem;
            }

.hero-cta {
                justify-content: center;
            }

.hero-stats {
                justify-content: center;
            }

.hero-image {
                order: -1;
                max-width: 80%;
                margin: 0 auto;
            }

.floating-card {
                display: none;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                height: 100vh;
                width: 70%;
                background-color: var(--dark);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.3s ease;
                gap: 2rem;
            }

body.light-mode .nav-links {
                background-color: var(--light);
            }

.nav-links.active {
                right: 0;
            }

.mobile-nav-toggle {
                display: block;
                z-index: 1001;
            }

.hero-text h1 {
                font-size: 2rem;
            }

.hero-cta {
                flex-direction: column;
                align-items: center;
            }

.btn {
                width: 100%;
                justify-content: center;
            }

.hero-stats {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    
    <nav>
        <div class="container nav-container">
            <div class="logo">
                <a href="#">
                    <span class="animate-ping" style="animation-delay: 0.1s">H</span>
                    <span class="animate-ping" style="animation-delay: 0.2s">A</span>
                    <span class="animate-ping" style="animation-delay: 0.3s">M</span>
                    <span class="animate-ping" style="animation-delay: 0.4s">U</span>
                    <span class="animate-ping" style="animation-delay: 0.5s">Z</span>
                    <span class="animate-ping" style="animation-delay: 0.6s">A</span>
                </a>
            </div>

<ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>

<section class="hero" id="home">
        <div class="container hero-content">
            <div class="hero-text">
                <h1>Hi there, I'm <span class="highlight">Mfuranziza Hamza</span></h1>
                <p>Experienced full-stack developer with 5+ years of expertise in Laravel, NestJS and Nuxt.js. I create digital solutions that help businesses grow.</p>
                
                <div class="hero-cta">
                    <a href="#contact" class="btn btn-primary">
                        <i class="uil uil-envelope"></i> Hire Me
                    </a>
                    <a href="#projects" class="btn btn-secondary">
                        <i class="uil uil-apps"></i> View Projects
                    </a>
                </div>
                
                <div class="hero-stats">
                    <div class="stat-item">
                        <span class="stat-number">5+</span>
                        <span class="stat-label">Years Experience</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">77+</span>
                        <span class="stat-label">Projects Completed</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">98%</span>
                        <span class="stat-label">Client Satisfaction</span>
                    </div>
                </div>
            </div>
            
            <div class="hero-image">
                <img src="https://techakim.com/sam/tg/7268/li/imgs/2.png" alt="Samuel Abera - Full Stack Developer">
                
                <div class="floating-card card-1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                        <path fill="#88a1ba" d="M37 32H5c-1.1 0-2-.9-2-2V10c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v20c0 1.1-.9 2-2 2z"></path>
                        <path fill="#f7f7fb" d="M37 32H5c-1.1 0-2-.9-2-2v-4h36v4c0 1.1-.9 2-2 2z"></path>
                        <path fill="#444a54" d="M24 41h-6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-5-2h4v-6h-4v6z"></path>
                        <path fill="#f7f7fb" d="M18 32h6v8h-6z"></path>
                        <circle cx="21" cy="29" r="1" fill="#444a54"></circle>
                        <path fill="#444a54" d="M37 7H5c-1.654 0-3 1.346-3 3v20c0 1.654 1.346 3 3 3h12v6h-5.5a1 1 0 0 0 0 2h19a1 1 0 1 0 0-2H25v-6h12c1.654 0 3-1.346 3-3V10c0-1.654-1.346-3-3-3zM4 10c0-.551.449-1 1-1h32c.552 0 1 .449 1 1v15H4V10zm19 29h-4v-6h4v6zm15-9c0 .551-.448 1-1 1H5c-.551 0-1-.449-1-1v-3h34v3z"></path>
                        <path fill="#f7f7fb" d="M43 40h-8a2 2 0 0 1-2-2V20a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2z"></path>
                        <path fill="#88a1ba" d="M33 22h12v14H33z"></path>
                        <path fill="#444a54" d="M43 17h-8c-1.654 0-3 1.346-3 3v18c0 1.654 1.346 3 3 3h8c1.654 0 3-1.346 3-3V20c0-1.654-1.346-3-3-3zm-9 6h10v12H34V23zm0-3c0-.551.448-1 1-1h8c.552 0 1 .449 1 1v1H34v-1zm10 18c0 .551-.448 1-1 1h-8c-.552 0-1-.449-1-1v-1h10v1z"></path>
                    </svg>
                    Full-Stack Development
                </div>
                
                <div class="floating-card card-2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path fill="#57a4ff" d="M80.25,63.75v184l1.86,2.06a34.676,34.676,0,0,0-1.86,4,35.29,35.29,0,0,0-2.05,17.94,33.74,33.74,0,0,0,.71,3.63,35.291,35.291,0,0,0-35.25,53.87,35.277,35.277,0,0,0,0,68.89,35.334,35.334,0,0,0,35.25,53.87,35.346,35.346,0,0,0,65.22,25.72,35.338,35.338,0,0,0,65.21-25.72,35.415,35.415,0,0,0,37.53-19.99c0-.01.01-.01.01-.02.05-.09.08-.2.13-.29l.04.04h201.2v-368Zm336,336h-168l-1.71-2.11a35.271,35.271,0,0,0-1.95-68.39,35.3,35.3,0,0,0-35.25-53.87,35.768,35.768,0,0,0,1.08-8.71,35.344,35.344,0,0,0-66.29-17.02,35.351,35.351,0,0,0-30.97-18.27c-.3,0-.61,0-.91.01V95.75h304Z"></path>
                        <path fill="#004fac" d="M105.141 326.806c-6.9-.425-13.525 3.44-20.153 11.755a84.01 84.01 0 00-9.41-5.716 8 8 0 00-7.168 14.3 78.124 78.124 0 0114.569 10.088C88.919 362.487 96 370.7 96 380a8 8 0 0016 0c0-12.728-6.914-23.308-14.719-31.206 4.036-5.154 6.362-5.908 6.807-6a3.475 3.475 0 01.844.955 1.564 1.564 0 01-.087-.166l14.31-7.156C118.693 335.5 114.376 327.381 105.141 326.806zM187.5 350.192a14.762 14.762 0 015.86-1.186c2.177.076 4.961.762 7.324 5.276C187.933 365.643 184 381.713 184 391a7.981 7.981 0 007.955 7.977H192a8.02 8.02 0 008-7.933c.012-1.057.583-25.943 25.94-32.283a8 8 0 00-3.88-15.522 55.321 55.321 0 00-7.776 2.557c-8.736-15.305-24.86-14.452-33.862-9.951a8 8 0 007.081 14.347z"></path>
                        <path fill="#004fac" d="M496,168a8,8,0,0,0,8-8V112a8,8,0,0,0-8-8H456V64a8,8,0,0,0-8-8H408V16a8,8,0,0,0-8-8H352a8,8,0,0,0-8,8V56H296V16a8,8,0,0,0-8-8H240a8,8,0,0,0-8,8V56H184V16a8,8,0,0,0-8-8H128a8,8,0,0,0-8,8V56H80a8,8,0,0,0-8,8v40H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H72v48H32a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8H42.7a43.316,43.316,0,0,0-10.15,44.98,43.284,43.284,0,0,0,0,78.04,43.342,43.342,0,0,0,37.22,57.61v.44A43.3,43.3,0,0,0,144,491.37a43.3,43.3,0,0,0,74.23-30.3v-.44A42.941,42.941,0,0,0,232,457.14V480a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h48v40a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V440h40a8,8,0,0,0,8-8V392h40a8,8,0,0,0,8-8V336a8,8,0,0,0-8-8H456V280h40a8,8,0,0,0,8-8V224a8,8,0,0,0-8-8H456V168Zm-40-48h32v32H456ZM360,24h32V56H360ZM248,24h32V56H248ZM136,24h32V56H136ZM40,152V120H72v32Zm0,112V232H72v21.25A42.968,42.968,0,0,0,69.88,264Zm95.95,211.95a27.294,27.294,0,0,1-49.73-19.81,39.024,39.024,0,0,0,20-23.68,8,8,0,1,0-15.34-4.56,23.01,23.01,0,0,1-21.93,16.34c-.25,0-.5.02-.75.04a27.313,27.313,0,0,1-17.83-41.51,7.989,7.989,0,0,0-5.01-12.12,27.305,27.305,0,0,1,0-53.3,7.989,7.989,0,0,0,5.01-12.12A27.313,27.313,0,0,1,68.2,283.72c.25.02.5.04.75.04A23.01,23.01,0,0,1,90.88,300.1a8.018,8.018,0,0,0,7.67,5.72,8.218,8.218,0,0,0,2.28-.33,8.005,8.005,0,0,0,5.39-9.95,39.024,39.024,0,0,0-20-23.68,27.286,27.286,0,0,1,23.97-32.07A8.3,8.3,0,0,0,112,240a8,8,0,0,0,2.25-.33,27.329,27.329,0,0,1,21.7,12.38ZM120,224.2V104H408V392H269.64a43.186,43.186,0,0,0-14.19-67.02,43.342,43.342,0,0,0-37.22-57.61v-.44A43.3,43.3,0,0,0,144,236.63,43.374,43.374,0,0,0,120,224.2ZM237.63,402.77a27.315,27.315,0,0,1-17.77,41.5c-.18-.01-.35-.03-.52-.03A23.013,23.013,0,0,1,197.4,427.9a8,8,0,0,0-15.34,4.56,39.02,39.02,0,0,0,19.7,23.53,27.67,27.67,0,0,1,.47,5.08,27.3,27.3,0,0,1-50.28,14.74V252.19a27.3,27.3,0,0,1,50.28,14.74,27.67,27.67,0,0,1-.47,5.08,39.02,39.02,0,0,0-19.7,23.53,8.005,8.005,0,0,0,5.39,9.95,8.218,8.218,0,0,0,2.28.33,8.018,8.018,0,0,0,7.67-5.72,23.013,23.013,0,0,1,21.94-16.34c.17,0,.34-.02.52-.03a27.315,27.315,0,0,1,17.77,41.5,7.989,7.989,0,0,0,5.01,12.12,27.305,27.305,0,0,1,0,53.3,7.989,7.989,0,0,0-5.01,12.12ZM280,472H248V445.02a42.309,42.309,0,0,0,3.58-5.02H280Zm112,0H360V440h32Zm48-48H257.43a43.443,43.443,0,0,0-.56-16H416a8,8,0,0,0,8-8V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8V224.6a43.09,43.09,0,0,0-16,7.06V72H440Zm48-80v32H456V344Zm0-112v32H456V232Z"></path>
                    </svg>
                    AI & Machine Learning
                </div>
                
                <div class="floating-card card-3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
                        <g>
                            <path fill="#9fdbf3" d="M11 7h26v34H11z"></path>
                            <path fill="#b2e5fb" d="M14 7v9a23 23 0 0 0 23 23c.1 0 0 1.2 0-32Z"></path>
                            <path fill="#374f68" d="M37 3v4H11V3a2 2 0 0 1 2-2h22a2 2 0 0 1 2 2Z"></path>
                            <path fill="#425b72" d="M37 3v2H18a4 4 0 0 1-4-4h21a2 2 0 0 1 2 2Z"></path>
                            <path fill="#374f68" d="M37 41v4a2 2 0 0 1-2 2H13a2 2 0 0 1-2-2v-4Z"></path>
                            <path fill="#425b72" d="M37 41v4H18a4 4 0 0 1-4-4Z"></path>
                            <path fill="#edebf2" d="M27 5h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm-2 40h-2a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2zM17 5a1 1 0 0 1-.38-1.92A1 1 0 1 1 17 5z"></path>
                            <path fill="#db5669" d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31a7.59 7.59 0 0 0-1.17.49l-2.05-1.22-2.12 2.12 1.22 2.05a7.59 7.59 0 0 0-.49 1.17L15 22.5v3l2.31.58a7.59 7.59 0 0 0 .49 1.17l-1.22 2.05 2.12 2.12 2.05-1.22a7.59 7.59 0 0 0 1.17.49L22.5 33h3l.58-2.31a7.59 7.59 0 0 0 1.17-.49l2.05 1.22 2.12-2.12-1.22-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z"></path>
                            <path fill="#f26674" d="M33 25.5v-3l-2.31-.58a7.59 7.59 0 0 0-.49-1.17l1.22-2.05-2.12-2.12-2.05 1.22a7.59 7.59 0 0 0-1.17-.49L25.5 15h-3l-.58 2.31c-1.64.52-.65.8-2.43-.26A9 9 0 0 0 26 30.94c.11-.47-.15 0 1.23-.74l2.05 1.22 2.12-2.12-1.2-2.05a7.59 7.59 0 0 0 .49-1.17ZM24 27a3 3 0 1 1 3-3 3 3 0 0 1-3 3Z"></path>
                            <path d="M35 0H13a3 3 0 0 0-3 3v42a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3a3 3

Related Examples

Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.5k
Product page
Product Information Card component that provides comprehensive details about a product, including an image, name, description, price, availability, color and size options, and a product description.

Author:
JaxStone

2 years ago

47.7k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

640
Subcribe Card - Alert - Notification

Author:
ABDO-SY

7 months ago

557
profile3

Author:
pablitodgb

3 months ago

190
Tailwind product gallery

Author:
JaxStone

2 years ago

26.4k
Breadcrumbs

Author:
Sophia Baker

2 years ago

10k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.5k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

4 months ago

558
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

6 months ago

790
Landing page

Author:
Freja Jensen

2 years ago

13k
Landing page template
Template de landing page com vídeo

Author:
viva afro

5 months ago

551

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components