Home
Ayyamperumal S
Premium High-Performance Web Gaming Hub

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 CSS v3. It is responsive. similar terms for this example are Services,Why choose us,popup,dialog,Author box, User information,Front page

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

Author Ayyamperumal S

181

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

Author:
Amit Pachange

3 years ago

52.1k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.4k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.6k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

3 years ago

13.2k
Confirmation model

Author:
Mr Robot

3 years ago

13.1k
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:

Author:
Prashant

3 years ago

64.1k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

21.7k
User profile card with Cover Image

Author:
Noob

3 years ago

32.2k
User Profile Card
Useful for testimonials and reviews section

Author:
Abhijit Sen

3 years ago

10.7k
Minimal Profile card

Author:
Abhijit Sen

3 years ago

11.7k
Responsive user card with tailwind

Author:
Gopi Yadav

3 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components