Premium High-Performance Web Gaming Hub

Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance.

Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

This tailwind example is contributed by Ayyamperumal S, on 04-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us,Masonry, Image grid,popup,dialog,Author box, User information,Front page

Footer Header Card Carousel Feature showcase Image gallery Hero Modal Profile Navigations Grid Gradient Navbar Landing Page

Author Ayyamperumal S

Tailwind v3.4 928 4

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ayyamperumal S | Premium Web Gaming</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap"
    rel="stylesheet">
  <style>
    body {
      font-family: 'Plus+Jakarta+Sans', sans-serif;
      background-color: #050505;
    }

.fade-out {
      opacity: 0;
      transform: scale(1.02);
      transition: all 0.4s ease-in-out;
    }

.fade-in {
      opacity: 1;
      transform: scale(1);
      transition: all 0.4s ease-in-out;
    }

#main-display {
      transition: opacity 0.4s ease-in-out;
    }
  </style>
</head>

<nav class="fixed top-0 w-full z-50 backdrop-blur-md border-b border-white/10">
    <div class="max-w-7xl mx-auto px-6 h-20 flex justify-between items-center">
      <div class="flex items-center gap-8">
        <a href="https://www.ayyamperumal.online/"
          class="text-2xl font-extrabold tracking-tighter bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
          AYYAMPERUMAL S
        </a>
        <div class="hidden md:flex gap-6 text-sm font-semibold text-gray-400">
          <a href="https://games.ayyamperumal.online/" class="hover:text-white transition">Play Online</a>
          <a href="#" class="hover:text-white transition">Library</a>
          <a href="#" class="hover:text-white transition">Community</a>
        </div>
      </div>
      <a href="https://games.ayyamperumal.online/"
        class="bg-white text-black px-6 py-2.5 rounded-lg text-sm font-bold hover:bg-purple-500 hover:text-white transition-all duration-300">
        Launch Arcade
      </a>
    </div>
  </nav>

<div class="max-w-2xl space-y-4">
          <div class="flex items-center gap-3">
            <span class="px-3 py-1 bg-purple-600 rounded-full text-[10px] font-bold uppercase tracking-widest">Trending Now</span>
            <div class="flex text-yellow-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                <path
                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
              </svg>
              <span id="display-rating" class="ml-2 text-white text-sm font-bold">9.8 / 10</span>
            </div>
          </div>

<h1 id="display-title" class="text-5xl md:text-7xl font-extrabold tracking-tighter leading-none">
            CYBER ACTION
          </h1>

<p id="display-desc" class="text-gray-300 text-lg md:text-xl max-w-xl font-medium leading-relaxed">
            Experience high-octane web gaming with zero lag. Our custom engine brings AAA visuals directly to your
            browser.
          </p>

</div>

<div class="absolute top-8 right-8 text-right">
        <div class="text-[10px] font-black uppercase tracking-[0.4em] text-white/40">Powered by</div>
        <div class="text-sm font-bold">Ayyamperumal S</div>
      </div>
    </section>
  </main>

<section class="max-w-[1600px] mx-auto px-4 md:px-8 pb-24">
    <div class="flex justify-between items-end mb-10">
      <div>
        <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight">Featured Library</h2>
        <p class="text-gray-400 mt-2">Handpicked titles by Ayyamperumal</p>
      </div>
      <a href="https://games.ayyamperumal.online/"
        class="text-purple-400 font-bold hover:text-purple-300 transition flex items-center gap-2">
        View All Games
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </a>
    </div>

<div
        class="group bg-[#111] rounded-2xl overflow-hidden border border-white/5 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2">
        <div class="aspect-video overflow-hidden">
          <img src="https://images.unsplash.com/photo-1509228468518-180dd4864904?q=80&w=600&auto=format" alt="Sudoku Master" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        <div class="p-5">
          <span class="text-[10px] text-purple-400 font-bold uppercase tracking-widest">Puzzle</span>
          <h3 class="text-xl font-bold mt-1">Sudoku Elite</h3>
          <p class="text-gray-500 text-sm mt-2 line-clamp-2">A minimalist and high-performance take on the classic logic
            puzzle.</p>
          <button class="w-full mt-4 py-2 bg-white/5 hover:bg-purple-600 rounded-lg text-sm font-bold transition-colors">Launch Game</button>
        </div>
      </div>

<div
        class="group bg-[#111] rounded-2xl overflow-hidden border border-white/5 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2">
        <div class="aspect-video overflow-hidden">
          <img src="https://images.unsplash.com/photo-1552820728-8b83bb6b773f?q=80&w=600&auto=format" alt="Neon Racer" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        <div class="p-5">
          <span class="text-[10px] text-pink-500 font-bold uppercase tracking-widest">Racing</span>
          <h3 class="text-xl font-bold mt-1">Neon Drift 2.0</h3>
          <p class="text-gray-500 text-sm mt-2 line-clamp-2">High-speed racing through procedural synth-wave landscapes.
          </p>
          <button class="w-full mt-4 py-2 bg-white/5 hover:bg-purple-600 rounded-lg text-sm font-bold transition-colors">Launch Game</button>
        </div>
      </div>

<div
        class="group bg-[#111] rounded-2xl overflow-hidden border border-white/5 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2">
        <div class="aspect-video overflow-hidden">
          <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?q=80&w=600&auto=format" alt="Pixel RPG" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        <div class="p-5">
          <span class="text-[10px] text-blue-400 font-bold uppercase tracking-widest">Adventure</span>
          <h3 class="text-xl font-bold mt-1">Ethereal Realm</h3>
          <p class="text-gray-500 text-sm mt-2 line-clamp-2">Explore a vast 2D world with stunning hand-drawn pixel art.
          </p>
          <button class="w-full mt-4 py-2 bg-white/5 hover:bg-purple-600 rounded-lg text-sm font-bold transition-colors">Launch Game</button>
        </div>
      </div>

<div
        class="group bg-[#111] rounded-2xl overflow-hidden border border-white/5 hover:border-purple-500/50 transition-all duration-300 hover:-translate-y-2">
        <div class="aspect-video overflow-hidden">
          <img src="https://images.unsplash.com/photo-1552503711-1fac14efc47f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMXx8Z2FtZXMlMjBvbmxpbmV8ZW58MHwxfHx8MTc2NzUzNTg0M3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Cyber Arena" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
        </div>
        <div class="p-5">
          <span class="text-[10px] text-green-400 font-bold uppercase tracking-widest">Action</span>
          <h3 class="text-xl font-bold mt-1">Cyber Arena</h3>
          <p class="text-gray-500 text-sm mt-2 line-clamp-2">Competitive top-down shooter with real-time multiplayer
            support.</p>
          <button class="w-full mt-4 py-2 bg-white/5 hover:bg-purple-600 rounded-lg text-sm font-bold transition-colors">Launch Game</button>
        </div>
      </div>

</div>
  </section>

<footer class="border-t border-white/5 py-12 text-center text-gray-500 text-sm">
    <p>© 2026 Ayyamperumal Games. All rights reserved.</p>
    <div class="mt-4 flex justify-center gap-6">
      <a href="https://www.ayyamperumal.online/" class="hover:text-white transition">Portfolio</a>
      <a href="#" class="hover:text-white transition">Privacy Policy</a>
      <a href="#" class="hover:text-white transition">Contact</a>
    </div>
  </footer>

let state = 0;
        const portal = document.getElementById('game-portal');
        const dImg = document.getElementById('display-img');
        const dTitle = document.getElementById('display-title');
        const dDesc = document.getElementById('display-desc');
        const dRate = document.getElementById('display-rating');

portal.addEventListener('click', () => {
            state = (state + 1) % gameData.length;
            
            // Animation sequence
            dImg.parentElement.style.opacity = '0.3';
            dTitle.style.transform = 'translateY(20px)';
            dTitle.style.opacity = '0';

setTimeout(() => {
                dImg.src = gameData[state].img;
                dTitle.innerText = gameData[state].title;
                dDesc.innerText = gameData[state].desc;
                dRate.innerText = gameData[state].rating;

dImg.onload = () => {
                    dImg.parentElement.style.opacity = '1';
                    dTitle.style.transform = 'translateY(0)';
                    dTitle.style.opacity = '1';
                };
            }, 300);
        });
  </script>
</body>

</html>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

3 years ago

26.7k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
Confirmation model

Mr Robot

4 years ago

13.6k
Responsive Article Section

Prashant

4 years ago

17.2k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k