ULTIMATE SNAKE

(click to https://quantum-snake.netlify.app/
)ULTIMATE SNAKE is a modern reimagining of the classic Snake game, blending retro gameplay with enhanced visuals, power-ups, and a dynamic difficulty system. Designed for both casual players and high-score chasers, this game brings nostalgia and excitement in every move.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid,find

Breadcrumb Image gallery Search Bar

Author Code Master(Mfuranziza Dusabe Hamza)

659

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Snake Game</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Rajdhani', sans-serif;
            overflow: hidden;
            position: relative;
        }

/* Animated starfield background */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

.star:nth-child(odd) { animation-delay: 1s; }
        .star:nth-child(3n) { animation-delay: 2s; }

@keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

/* Floating particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 0;
        }

.particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(0, 255, 255, 0.6);
            border-radius: 50%;
            animation: float 6s infinite linear;
        }

@keyframes float {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

/* Main game container */
        .game-container {
            position: relative;
            z-index: 1;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 25px;
            padding: 30px;
            border: 3px solid rgba(0, 255, 255, 0.4);
            box-shadow: 
                0 0 80px rgba(0, 255, 255, 0.3),
                inset 0 0 80px rgba(0, 255, 255, 0.1);
            animation: containerGlow 4s ease-in-out infinite alternate;
            max-width: 95vw;
            max-height: 95vh;
        }

@keyframes containerGlow {
            from { 
                border-color: rgba(0, 255, 255, 0.4);
                box-shadow: 0 0 80px rgba(0, 255, 255, 0.3), inset 0 0 80px rgba(0, 255, 255, 0.1);
            }
            to { 
                border-color: rgba(0, 255, 255, 0.8);
                box-shadow: 0 0 120px rgba(0, 255, 255, 0.5), inset 0 0 80px rgba(0, 255, 255, 0.2);
            }
        }

.game-title {
            font-family: 'Orbitron', monospace;
            font-size: 4rem;
            font-weight: 900;
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 4s ease-in-out infinite;
            text-shadow: 0 0 40px rgba(0, 255, 255, 0.6);
            position: relative;
        }

.game-title::after {
            content: 'ULTIMATE SNAKE';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: shine 3s infinite;
        }

@keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

@keyframes shine {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

/* Game mode selector */
        .game-modes {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

.mode-btn {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 200, 0.3));
            border: 2px solid rgba(0, 255, 255, 0.5);
            padding: 10px 20px;
            border-radius: 15px;
            color: #00ffff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Orbitron', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.mode-btn:hover, .mode-btn.active {
            background: linear-gradient(45deg, rgba(0, 255, 255, 0.4), rgba(0, 200, 200, 0.5));
            border-color: #00ffff;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            transform: translateY(-2px);
        }

.game-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

.stat-card {
            background: rgba(0, 255, 255, 0.1);
            border: 2px solid rgba(0, 255, 255, 0.3);
            border-radius: 20px;
            padding: 15px;
            text-align: center;
            backdrop-filter: blur(15px);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

.stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(0, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            transition: transform 0.6s;
        }

.stat-card:hover {
            background: rgba(0, 255, 255, 0.15);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

.stat-card:hover::before {
            transform: rotate(45deg) translate(50%, 50%);
        }

.stat-label {
            font-size: 0.9rem;
            color: #00ffff;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

.stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
        }

/* Enhanced speed controls */
        .controls-section {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 20px;
        }

.speed-controls, .size-controls {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

.control-label {
            color: #00ffff;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: 'Orbitron', monospace;
        }

.control-btn {
            background: linear-gradient(45deg, #00ffff, #0088aa);
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            color: white;
            font-size: 1.4rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.4);
            position: relative;
            overflow: hidden;
        }

.control-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.control-btn:hover::before {
            width: 100%;
            height: 100%;
        }

.control-btn:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.6);
            background: linear-gradient(45deg, #00cccc, #0099bb);
        }

.control-btn:active {
            transform: translateY(0) scale(0.95);
        }

.control-btn:disabled {
            background: rgba(100, 100, 100, 0.3);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

.control-display {
            background: rgba(0, 255, 255, 0.15);
            border: 2px solid rgba(0, 255, 255, 0.4);
            border-radius: 15px;
            padding: 10px 20px;
            color: white;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 1.1rem;
            min-width: 80px;
            text-align: center;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

/* Game board with dynamic sizing */
        .board-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }

.game-board {
            border: 4px solid #00ffff;
            border-radius: 20px;
            background: linear-gradient(45deg, #001122 0%, #002244 50%, #001133 100%);
            box-shadow: 
                inset 0 0 120px rgba(0, 255, 255, 0.15),
                0 0 60px rgba(0, 255, 255, 0.4);
            position: relative;
            display: block;
        }

.game-board::before {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            right: -4px;
            bottom: -4px;
            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ff00, #00ffff);
            background-size: 500% 500%;
            border-radius: 24px;
            z-index: -1;
            animation: borderGlow 4s ease-in-out infinite;
        }

@keyframes borderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Power-up indicators */
        .powerups {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

.powerup-indicator {
            background: rgba(255, 255, 0, 0.1);
            border: 2px solid rgba(255, 255, 0, 0.3);
            border-radius: 15px;
            padding: 8px 15px;
            color: #ffff00;
            font-weight: 600;
            font-size: 0.9rem;
            text-align: center;
            transition: all 0.3s ease;
        }

.powerup-indicator.active {
            background: rgba(255, 255, 0, 0.3);
            border-color: #ffff00;
            box-shadow: 0 0 20px rgba(255, 255, 0, 0.5);
            animation: powerupPulse 1s infinite;
        }

@keyframes powerupPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

/* Game status */
        .game-status {
            text-align: center;
            margin-bottom: 15px;
            padding: 12px;
            border-radius: 15px;
            background: rgba(0, 255, 0, 0.1);
            border: 2px solid rgba(0, 255, 0, 0.3);
            color: #00ff00;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'Orbitron', monospace;
            transition: all 0.3s ease;
        }

.game-status.waiting {
            background: rgba(255, 255, 0, 0.1);
            border-color: rgba(255, 255, 0, 0.3);
            color: #ffff00;
        }

.game-status.paused {
            background: rgba(255, 165, 0, 0.1);
            border-color: rgba(255, 165, 0, 0.3);
            color: #ffa500;
        }

.controls {
            margin-top: 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
            line-height: 1.8;
        }

.control-key {
            display: inline-block;
            background: rgba(0, 255, 255, 0.2);
            border: 1px solid rgba(0, 255, 255, 0.4);
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px;
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            color: #00ffff;
            transition: all 0.3s ease;
        }

.control-key:hover {
            background: rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
        }

/* Game Over Overlay */
        .game-over-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(15px);
        }

.game-over-card {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border: 4px solid #ff4444;
            border-radius: 25px;
            padding: 50px;
            text-align: center;
            box-shadow: 0 0 150px rgba(255, 68, 68, 0.6);
            animation: gameOverPulse 1.2s ease-in-out;
            position: relative;
            overflow: hidden;
        }

.game-over-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 68, 68, 0.1), transparent);
            animation: gameOverShine 2s infinite;
        }

@keyframes gameOverPulse {
            0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

@keyframes gameOverShine {
            0% { transform: rotate(45deg) translate(-200%, -200%); }
            100% { transform: rotate(45deg) translate(200%, 200%); }
        }

.game-over-title {
            font-family: 'Orbitron', monospace;
            font-size: 3.5rem;
            color: #ff4444;
            font-weight: 900;
            text-shadow: 0 0 30px #ff4444;
            margin-bottom: 25px;
            animation: textFlicker 2s infinite;
            position: relative;
            z-index: 1;
        }

@keyframes textFlicker {
            0%, 100% { opacity: 1; text-shadow: 0 0 30px #ff4444; }
            50% { opacity: 0.8; text-shadow: 0 0 50px #ff4444, 0 0 80px #ff6666; }
        }

.final-stats {
            margin-bottom: 30px;
            position: relative;
            z-index: 1;
        }

.final-score {
            font-size: 1.6rem;
            color: white;
            margin-bottom: 10px;
            font-weight: 600;
            font-family: 'Orbitron', monospace;
        }

.restart-btn {
            background: linear-gradient(45deg, #ff4444, #cc3333);
            border: none;
            padding: 18px 35px;
            border-radius: 15px;
            color: white;
            font-size: 1.3rem;
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.restart-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s ease;
        }

.restart-btn:hover::before {
            width: 300%;
            height: 300%;
        }

.restart-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 35px rgba(255, 68, 68, 0.6);
            background: linear-gradient(45deg, #ff6666, #ff4444);
        }

/* Responsive design */
        @media (max-width: 1024px) {
            .game-title { font-size: 3rem; }
            .game-container { padding: 25px; }
            .controls-section { flex-direction: column; }
        }

@media (max-width: 768px) {
            .game-container { padding: 20px; margin: 10px; }
            .game-title { font-size: 2.5rem; }
            .game-stats { grid-template-columns: repeat(2, 1fr); }
            .game-modes { flex-wrap: wrap; }
            .mode-btn { padding: 8px 15px; font-size: 0.9rem; }
        }

@media (max-width: 480px) {
            .game-title { font-size: 2rem; }
            .controls { font-size: 0.9rem; }
            .game-stats { grid-template-columns: 1fr; }
            .stat-value { font-size: 1.5rem; }
        }
    </style>
</head>
<body>
    
    <div class="stars" id="stars"></div>
    <div class="particles" id="particles"></div>
    
    <div class="game-container">
        <h1 class="game-title">ULTIMATE SNAKE</h1>
        
        
        <div class="game-modes">
            <button class="mode-btn active" onclick="setGameMode('classic')">Classic</button>
            <button class="mode-btn" onclick="setGameMode('survival')">Survival</button>
            <button class="mode-btn" onclick="setGameMode('speed')">Speed Run</button>
            <button class="mode-btn" onclick="setGameMode('giant')">Giant Mode</button>
        </div>
        
        <div class="game-stats">
            <div class="stat-card">
                <div class="stat-label">Score</div>
                <div class="stat-value" id="score">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">High Score</div>
                <div class="stat-value" id="highScore">0</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Length</div>
                <div class="stat-value" id="length">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Level</div>
                <div class="stat-value" id="level">1</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">Time</div>
                <div class="stat-value" id="gameTime">0:00</div>
            </div>
        </div>

<div class="controls-section">
            <div class="speed-controls">
                <span class="control-label">Speed:</span>
                <button class="control-btn" id="decreaseSpeed" onclick="changeSpeed(-1)">−</button>
                <div class="control-display" id="speedDisplay">5</div>
                <button class="control-btn" id="increaseSpeed" onclick="changeSpeed(1)">+</button>
            </div>
            <div class="size-controls">
                <span class="control-label">Size:</span>
                <button class="control-btn" id="decreaseSize" onclick="changeBoardSize(-1)">−</button>
                <div class="control-display" id="sizeDisplay">M</div>
                <button class="control-btn" id="increaseSize" onclick="changeBoardSize(1)">+</button>
            </div>
        </div>

<div class="powerups">
            <div class="powerup-indicator" id="speedBoost">Speed Boost: OFF</div>
            <div class="powerup-indicator" id="scoreMultiplier">Score x1</div>
            <div class="powerup-indicator" id="invincible">Shield: OFF</div>
        </div>

<div class="game-status waiting" id="gameStatus">Press any arrow key or WASD to start</div>
        
        
        <div class="board-container">
            <canvas id="board" class="game-board"></canvas>
        </div>
        
        <div class="controls">
            <strong>Controls:</strong><br>
            <span class="control-key">↑</span> <span class="control-key">↓</span> <span class="control-key">←</span> <span class="control-key">→</span> or <span class="control-key">WASD</span> to move<br>
            <span class="control-key">SPACE</span> to pause/resume • <span class="control-key">R</span> to restart<br><br>
            
            <strong>Power-ups:</strong> Collect special items for temporary abilities!<br>
            <strong>🟡 Speed Boost</strong> • <strong>🟢 Score Multiplier</strong> • <strong>🔵 Invincibility Shield</strong> • <strong>🟣 Size Reducer</strong>
        </div>
    </div>

<div class="game-over-overlay" id="gameOverOverlay">
        <div class="game-over-card">
            <div class="game-over-title">GAME OVER</div>
            <div class="final-stats">
                <div class="final-score">Final Score: <span id="finalScore">0</span></div>
                <div class="final-score">Snake Length: <span id="finalLength">1</span></div>
                <div class="final-score">Level Reached: <span id="finalLevel">1</span></div>
                <div class="final-score">Time Played: <span id="finalTime">0:00</span></div>
                <div class="final-score">Game Mode: <span id="finalMode">Classic</span></div>
            </div>
            <button class="restart-btn" onclick="restartGame()">PLAY AGAIN</button>
        </div>
    </div>

// Snake variables
        let snakeX, snakeY;
        let speedX = 0, speedY = 0;
        let snakeBody = [];

// Game state
        let foodX, foodY;
        let powerupX, powerupY, powerupType = null, powerupTimer = 0;
        let gameOver = false;
        let gameStarted = false;
        let gamePaused = false;
        let gameMode = 'classic';
        
        // Stats
        let score = 0;
        let level = 1;
        let gameSpeed = 5;
        let highScore = 0;
        let gameTime = 0;
        let gameTimer;
        let gameInterval;
        
        // Power-up states
        let speedBoost = false, scoreMultiplier = 1, invincible = false;
        let powerupTimers = { speed: 0, score: 0, invincible: 0 };

// Game settings
        const MIN_SPEED = 1, MAX_SPEED = 10;
        const BASE_INTERVAL = 200;
        const POWERUP_DURATION = 5000; // 5 seconds

// Initialize
        function createBackground() {
            // Create stars
            const starsContainer = document.getElementById('stars');
            for (let i = 0; i < 150; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.left = Math.random() * 100 + '%';
                star.style.top = Math.random() * 100 + '%';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.animationDelay = Math.random() * 3 + 's';
                starsContainer.appendChild(star);
            }

// Create floating particles
            const particlesContainer = document.getElementById('particles');
            for (let i = 0; i < 20; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 3 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

function initializeBoard() {
            const size = boardSizes[currentSize];
            total_row = size.rows;
            total_col = size.cols;
            blockSize = size.blockSize;

board.height = total_row * blockSize;
            board.width = total_col * blockSize;
            
            // Center snake
            snakeX = Math.floor(total_col / 2) * blockSize;
            snakeY = Math.floor(total_row / 2) * blockSize;
        }

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

764
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

7 months ago

406
Responsive search bar
with loading animation on submit button

Author:
Ron Hicks

3 years ago

11.7k
search button

Author:
Freja Jensen

2 years ago

12.8k
Search bar with filter options

Author:
Piet Vriend

3 years ago

25.5k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
Skywings
used in traveling flight

Author:
INGRIDE MUZIRANENGE

1 month ago

193
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 image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

60.6k
Search form

Author:
Laurits

2 years ago

11.7k
Large search bar with icon

Author:
Prajwal Hallale

3 years ago

10.4k
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

591

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components