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)

724

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

Author:
Amit Pachange

1 year ago

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

Author:
Coastal UI

1 year ago

1.8k
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

10 months ago

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

Author:
Ayyamperumal S

7 months ago

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

Author:
Ijila Itunu

3 months ago

365
Caming Soon page design
coming soom page design

Author:
Tofayel Islam

4 weeks ago

21
vscode a la omerlinks
vscode a la omerlinks

Author:
Omer fils ELENGA

3 weeks ago

111
Standard Landing Boilerplate

Author:
Hasan AlDoy (McDoy)

11 months ago

1.2k
Coming Soon Page
Modern , gradient coming soon page

Author:
Rajesh Maheshwari

9 months ago

1.6k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

11 months ago

1.6k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

2k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components