Phone Simulator with Built-in Car Racing Game and Play.

This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

This tailwind example is contributed by Arjun Kumar, on 01-Jun-2026. Component is made with Tailwind v3.4. It is responsive.

Card Button Other

Author Arjun Kumar

Tailwind v3.4 595

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>Phone Simulator with Car Racing Game</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
<body>
  <div class="phone-container">
    <div class="phone-screen">
      <div class="notch"></div>
      <div class="status-bar">
        <span>9:41</span>
        <span>
          <i class="fas fa-signal"></i>
          <i class="fas fa-wifi"></i>
          <i class="fas fa-battery-full"></i> 85%
        </span>
      </div>

<div class="home-screen" id="homeScreen">
        <div style="color:white; font-size: 26px; font-weight: 700; text-align: center; margin-top: 8px; letter-spacing: 1px;">
          My Phone
        </div>
        <div class="app-grid">
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #34c759, #28a745);">
              <i class="fas fa-phone"></i>
            </div>
            <span class="app-label">Phone</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #007aff, #0056cc);">
              <i class="fas fa-comment-dots"></i>
            </div>
            <span class="app-label">Messages</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #ff9500, #e68600);">
              <i class="fas fa-music"></i>
            </div>
            <span class="app-label">Music</span>
          </div>
          <div class="app-icon" id="gameAppIcon" onclick="openGame()">
            <div class="app-icon-box game-app">
              <i class="fas fa-car"></i>
            </div>
            <span class="app-label">Car Race</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #5856d6, #4844aa);">
              <i class="fas fa-camera"></i>
            </div>
            <span class="app-label">Camera</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #ff3b30, #d63029);">
              <i class="fas fa-envelope"></i>
            </div>
            <span class="app-label">Mail</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #0a84ff, #0066cc);">
              <i class="fas fa-globe"></i>
            </div>
            <span class="app-label">Browser</span>
          </div>
          <div class="app-icon">
            <div class="app-icon-box" style="background: linear-gradient(135deg, #af52de, #8e44ad);">
              <i class="fas fa-gear"></i>
            </div>
            <span class="app-label">Settings</span>
          </div>
        </div>
        <div class="dock">
          <div class="app-icon-box" style="width:42px; height:42px; background:linear-gradient(135deg, #34c759, #28a745); font-size:18px; border-radius:13px;">
            <i class="fas fa-phone"></i>
          </div>
          <div class="app-icon-box" style="width:42px; height:42px; background:linear-gradient(135deg, #007aff, #0056cc); font-size:18px; border-radius:13px;">
            <i class="fas fa-comment-dots"></i>
          </div>
          <div class="app-icon-box game-app" style="width:42px; height:42px; font-size:18px; border-radius:13px; cursor:pointer;" onclick="openGame()">
            <i class="fas fa-car"></i>
          </div>
          <div class="app-icon-box" style="width:42px; height:42px; background:linear-gradient(135deg, #ff9500, #e68600); font-size:18px; border-radius:13px;">
            <i class="fas fa-music"></i>
          </div>
        </div>
      </div>

let gameRunning = false;
    let animationId;

const player = {
      x: 0,
      y: 0,
      width: 45,
      height: 72,
      speed: 5
    };

let obstacles = [];
    let score = 0;
    let gameSpeed = 4;
    let frameCount = 0;
    let roadMarkings = [];
    let moveLeft = false;
    let moveRight = false;
    let moveUp = false;
    let moveDown = false;

function resizeCanvas() {
      const gameArea = canvas.parentElement;
      canvas.width = gameArea.clientWidth;
      canvas.height = gameArea.clientHeight;
      player.x = canvas.width / 2 - player.width / 2;
      player.y = canvas.height - player.height - 15;
      initRoadMarkings();
    }

function spawnObstacle() {
      const laneWidth = canvas.width / 3;
      const lane = Math.floor(Math.random() * 3);
      const x = lane * laneWidth + laneWidth / 2 - 22;
      obstacles.push({
        x: x,
        y: -90,
        width: 40,
        height: 65,
        speed: gameSpeed + Math.random() * 2.5
      });
    }

function resetGame() {
      obstacles = [];
      score = 0;
      gameSpeed = 4;
      frameCount = 0;
      scoreDisplay.textContent = '0';
      player.x = canvas.width / 2 - player.width / 2;
      player.y = canvas.height - player.height - 15;
      initRoadMarkings();
      const restartBtn = document.getElementById('restartBtn');
      if (restartBtn) restartBtn.style.display = 'none';
    }

function drawPlayer() {
      ctx.fillStyle = '#ff3333';
      ctx.beginPath();
      ctx.roundRect(player.x, player.y, player.width, player.height, 8);
      ctx.fill();

ctx.fillStyle = '#1a1a2e';
      ctx.beginPath();
      ctx.roundRect(player.x + 6, player.y + 9, player.width - 12, 22, 6);
      ctx.fill();

ctx.fillStyle = 'rgba(100,150,255,0.35)';
      ctx.beginPath();
      ctx.roundRect(player.x + 8, player.y + 11, 12, 9, 3);
      ctx.fill();

ctx.fillStyle = '#ffff88';
      ctx.shadowColor = '#ffcc00';
      ctx.shadowBlur = 16;
      ctx.fillRect(player.x + 3, player.y + 52, 9, 8);
      ctx.fillRect(player.x + player.width - 12, player.y + 52, 9, 8);
      ctx.shadowBlur = 0;

ctx.fillStyle = '#111';
      ctx.fillRect(player.x - 4, player.y + 7, 8, 18);
      ctx.fillRect(player.x + player.width - 4, player.y + 7, 8, 18);
      ctx.fillRect(player.x - 4, player.y + 45, 8, 18);
      ctx.fillRect(player.x + player.width - 4, player.y + 45, 8, 18);

ctx.fillStyle = '#ff0000';
      ctx.shadowColor = '#ff0000';
      ctx.shadowBlur = 10;
      ctx.fillRect(player.x + 3, player.y + 2, 9, 6);
      ctx.fillRect(player.x + player.width - 12, player.y + 2, 9, 6);
      ctx.shadowBlur = 0;

ctx.fillStyle = '#ffcc00';
      ctx.shadowColor = '#ffaa00';
      ctx.shadowBlur = 7;
      ctx.fillRect(player.x + player.width / 2 - 7, player.y - 5, 14, 5);
      ctx.shadowBlur = 0;
    }

function drawObstacle(obs) {
      ctx.fillStyle = '#ff6600';
      ctx.beginPath();
      ctx.roundRect(obs.x, obs.y, obs.width, obs.height, 7);
      ctx.fill();

ctx.fillStyle = '#1a1a2e';
      ctx.beginPath();
      ctx.roundRect(obs.x + 5, obs.y + 8, obs.width - 10, 18, 5);
      ctx.fill();

ctx.fillStyle = '#ffff88';
      ctx.shadowColor = '#ffcc00';
      ctx.shadowBlur = 12;
      ctx.fillRect(obs.x + 2, obs.y + obs.height - 13, 8, 7);
      ctx.fillRect(obs.x + obs.width - 10, obs.y + obs.height - 13, 8, 7);
      ctx.shadowBlur = 0;

ctx.fillStyle = '#111';
      ctx.fillRect(obs.x - 3, obs.y + 6, 7, 16);
      ctx.fillRect(obs.x + obs.width - 4, obs.y + 6, 7, 16);
      ctx.fillRect(obs.x - 3, obs.y + 42, 7, 16);
      ctx.fillRect(obs.x + obs.width - 4, obs.y + 42, 7, 16);
    }

function drawRoad() {
      ctx.fillStyle = '#2a2a2a';
      ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#3a3a3a';
      ctx.fillRect(0, 0, 10, canvas.height);
      ctx.fillRect(canvas.width - 10, 0, 10, canvas.height);

ctx.fillStyle = '#444';
      ctx.setLineDash([25, 16]);
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(canvas.width / 3, 0);
      ctx.lineTo(canvas.width / 3, canvas.height);
      ctx.strokeStyle = '#444';
      ctx.stroke();

ctx.beginPath();
      ctx.moveTo((canvas.width / 3) * 2, 0);
      ctx.lineTo((canvas.width / 3) * 2, canvas.height);
      ctx.stroke();
      ctx.setLineDash([]);

ctx.fillStyle = '#ffcc00';
      roadMarkings.forEach(marking => {
        ctx.fillRect(marking.x, marking.y, marking.width, marking.height);
      });
    }

function update() {
      if (!gameRunning) return;

if (moveLeft) {
        player.x -= player.speed;
        if (player.x < 16) player.x = 16;
      }
      if (moveRight) {
        player.x += player.speed;
        if (player.x > canvas.width - player.width - 16) player.x = canvas.width - player.width - 16;
      }
      if (moveUp) {
        player.y -= player.speed;
        if (player.y < 8) player.y = 8;
      }
      if (moveDown) {
        player.y += player.speed;
        if (player.y > canvas.height - player.height - 8) player.y = canvas.height - player.height - 8;
      }

roadMarkings.forEach(marking => {
        marking.y += gameSpeed;
        if (marking.y > canvas.height) {
          marking.y = -25;
        }
      });

obstacles.forEach(obs => {
        obs.y += obs.speed;
      });

obstacles = obstacles.filter(obs => {
        if (obs.y > canvas.height + 100) {
          score += 10;
          scoreDisplay.textContent = score;
          return false;
        }
        return true;
      });

frameCount++;
      if (frameCount % 42 === 0) {
        spawnObstacle();
      }

if (frameCount % 220 === 0 && gameSpeed < 12) {
        gameSpeed += 0.6;
      }

for (let obs of obstacles) {
        if (
          player.x < obs.x + obs.width &&
          player.x + player.width > obs.x &&
          player.y < obs.y + obs.height &&
          player.y + player.height > obs.y
        ) {
          gameOver();
          return;
        }
      }
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawRoad();
      obstacles.forEach(obs => drawObstacle(obs));
      drawPlayer();

if (!gameRunning && frameCount > 0) {
        ctx.fillStyle = 'rgba(0,0,0,0.75)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'white';
        ctx.font = 'bold 22px "Segoe UI", sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('GAME OVER', canvas.width / 2, canvas.height / 2 - 22);
        ctx.font = '15px "Segoe UI", sans-serif';
        ctx.fillText('Score: ' + score, canvas.width / 2, canvas.height / 2 + 16);
        ctx.font = '13px "Segoe UI", sans-serif';
        ctx.fillText('Tap screen to restart', canvas.width / 2, canvas.height / 2 + 44);
      }
    }

function gameLoop() {
      update();
      draw();
      animationId = requestAnimationFrame(gameLoop);
    }

function gameOver() {
      gameRunning = false;
      let restartBtn = document.getElementById('restartBtn');
      if (!restartBtn) {
        restartBtn = document.createElement('button');
        restartBtn.id = 'restartBtn';
        restartBtn.innerHTML = '<i class="fas fa-rotate-right"></i> Restart';
        restartBtn.style.cssText = `
          position: absolute;
          bottom: 18px;
          left: 50%;
          transform: translateX(-50%);
          background: #ff4444;
          color: white;
          border: none;
          padding: 12px 26px;
          border-radius: 25px;
          font-size: 14px;
          font-weight: bold;
          cursor: pointer;
          z-index: 10;
          box-shadow: 0 5px 18px rgba(255,0,0,0.5);
          display: flex;
          align-items: center;
          gap: 7px;
        `;
        restartBtn.addEventListener('click', restartGame);
        document.querySelector('.game-area').appendChild(restartBtn);
      }
      restartBtn.style.display = 'flex';
    }

function restartGame() {
      const restartBtn = document.getElementById('restartBtn');
      if (restartBtn) restartBtn.style.display = 'none';
      resetGame();
      gameRunning = true;
    }

function startGame() {
      resizeCanvas();
      resetGame();
      gameRunning = true;
      gameLoop();
    }

function stopGame() {
      gameRunning = false;
      if (animationId) {
        cancelAnimationFrame(animationId);
      }
      const restartBtn = document.getElementById('restartBtn');
      if (restartBtn) restartBtn.style.display = 'none';
    }

function openGame() {
      document.getElementById('homeScreen').style.display = 'none';
      document.getElementById('gameScreen').classList.add('active');
      startGame();
    }

function closeGame() {
      stopGame();
      document.getElementById('gameScreen').classList.remove('active');
      document.getElementById('homeScreen').style.display = 'flex';
    }

document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft' || e.key === 'a') moveLeft = true;
      if (e.key === 'ArrowRight' || e.key === 'd') moveRight = true;
      if (e.key === 'ArrowUp' || e.key === 'w') moveUp = true;
      if (e.key === 'ArrowDown' || e.key === 's') moveDown = true;
    });

document.addEventListener('keyup', (e) => {
      if (e.key === 'ArrowLeft' || e.key === 'a') moveLeft = false;
      if (e.key === 'ArrowRight' || e.key === 'd') moveRight = false;
      if (e.key === 'ArrowUp' || e.key === 'w') moveUp = false;
      if (e.key === 'ArrowDown' || e.key === 's') moveDown = false;
    });

canvas.addEventListener('click', () => {
      if (!gameRunning && frameCount > 0) {
        restartGame();
      }
    });

window.addEventListener('resize', () => {
      if (gameRunning) {
        resizeCanvas();
      }
    });

resizeCanvas();

if (!ctx.roundRect) {
      ctx.roundRect = function (x, y, w, h, r) {
        if (typeof r === 'number') r = { tl: r, tr: r, br: r, bl: r };
        ctx.beginPath();
        ctx.moveTo(x + r.tl, y);
        ctx.lineTo(x + w - r.tr, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r.tr);
        ctx.lineTo(x + w, y + h - r.br);
        ctx.quadraticCurveTo(x + w, y + h, x + w - r.br, y + h);
        ctx.lineTo(x + r.bl, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - r.bl);
        ctx.lineTo(x, y + r.tl);
        ctx.quadraticCurveTo(x, y, x + r.tl, y);
        ctx.closePath();
      };
    }
  </script>
</body>
</html>

Related Examples

IMDB score and votes box

Darius G

3 years ago

9.1k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Card
Card with Likes and download Button

Mrunal Solkar

3 years ago

11.2k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

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

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

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

Ameth Galarcio

1 year ago

2.3k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Ahita Bisma Adlula

1 year ago

1.2k