Home
Bonimater
an off line game of catching afox

an off line game of catching afox

This tailwind example is contributed by Bonimater, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner,Masonry, Image grid

Call to Action Image gallery

Author Bonimater

785

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Catch the Fox Game</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .fox {
      position: absolute;
      font-size: 2rem;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .fox:active {
      transform: scale(1.2);
    }
  </style>
</head>
<body class="bg-green-100 flex flex-col items-center justify-center min-h-screen text-center px-4">

<h1 class="text-3xl font-bold mb-4 text-orange-600">🦊 Catch the Fox!</h1>
  <p class="mb-2 text-lg">Click the fox as many times as you can in <span id="time" class="font-bold">15</span> seconds!</p>
  <p class="mb-6 text-xl">Score: <span id="score" class="font-bold text-blue-600">0</span></p>

<button onclick="startGame()" class="mt-6 bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
    Start Game
  </button>

let score = 0;
    let timeLeft = 15;
    let gameInterval = null;
    let moveInterval = null;

function startGame() {
      score = 0;
      timeLeft = 15;
      scoreDisplay.textContent = score;
      timeDisplay.textContent = timeLeft;
      randomPosition();

fox.onclick = () => {
        score++;
        scoreDisplay.textContent = score;
        randomPosition();
      };

gameInterval = setInterval(() => {
        timeLeft--;
        timeDisplay.textContent = timeLeft;
        if (timeLeft <= 0) {
          clearInterval(gameInterval);
          clearInterval(moveInterval);
          fox.style.display = 'none';
          alert(`Time's up! You scored ${score} points.`);
        }
      }, 1000);

moveInterval = setInterval(randomPosition, 800);
      fox.style.display = 'block';
    }
  </script>
</body>
</html>

Related Examples

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

Author:
ORGIN_DREAMS

9 months ago

1.2k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.4k
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

2.5k
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

2k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.6k
Highlighted Important section with button

Author:
Amit Pachange

3 years ago

9.9k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.6k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

11 months ago

1.6k
Bubblegum Button
This interactive button component is designed with a sleek gradient background and smooth hover effects, making it an eye-catching call-to-action element for modern web interfaces. Styling and Features: ✅ Gradient Background & Rounded Shape • The button container has a subtle gradient overlay (bg-gradient-to-tr) that smoothly transitions from soft pink (from-pink-300) to light blue (to-blue-300), giving it a vibrant and modern look. • Wrapped in a rounded-full container for a pill-shaped aesthetic. ✅ Floating & Shadow Effects • The shadow-lg property creates a soft floating effect, enhancing depth and visibility. • Will-change-transform optimizes animations for a seamless hover experience. ✅ Interactive Hover Animations • On hover, the inner button scales up (hover:scale-105) and lifts slightly (hover:-translate-y-2), simulating a press-and-release motion. • The transition is smooth, with a 500ms animation (transition duration-500). ✅ Content & Icon • The “Learn more” label is paired with a right-arrow icon (svg) for clear visual guidance. • The icon and text are flex-aligned (items-center flex), ensuring a balanced and responsive layout. This button is ideal for call-to-action elements, product highlights, or download prompts, offering a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

1 year ago

1.4k
gallary
html , css

Author:
Hacker Development

10 months ago

664
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Homayoun

2 months ago

536

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components