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 v3.4. 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)

Tailwind v3.4 1.4k 16

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

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Coastal UI

1 year ago

2.4k
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.

Ayyamperumal S

1 year ago

2.6k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.8k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Caming Soon page design
coming soom page design

Tofayel Islam

9 months ago

808
vscode a la omerlinks
vscode a la omerlinks

Omer fils ELENGA

9 months ago

601
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

8 months ago

1.2k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

6 months ago

985
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

605
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

444
home
search home

Uwera Dorcas

1 year ago

748