JSFiddle - React, Tailwind, and code Playground

by goofy_aa

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Hub</title>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #1e1e1e;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
}
h1 { color: #00ffcc; margin: 20px 0; }
nav { margin-bottom: 20px; }
button.nav-btn {
  background-color: #00ffcc;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}
button.nav-btn:hover { background-color: #00d9b3; }
.game-container {
  display: none;
  margin: 0 auto 40px;
  padding: 20px;
  border: 2px solid #00ffcc;
  border-radius: 10px;
  max-width: 600px;
  background-color: #222;
}
canvas { background-color: #000; display: block; margin: 0 auto; border: 2px solid #00ffcc; }
table { margin: 0 auto; border-collapse: collapse; }
td { width: 60px; height: 60px; border: 1px solid #00ffcc; font-size: 48px; text-align: center; vertical-align: middle; cursor: pointer; }
</style>
</head>
<body>

<h1>Mini Hub 🎮</h1>
<nav>
  <button class="nav-btn" onclick="showGame('ticTacToe')">Tic-Tac-Toe</button>
  <button class="nav-btn" onclick="showGame('clicker')">Clicker</button>
  <button class="nav-btn" onclick="showGame('snake')">Snake</button>
  <button class="nav-btn" onclick="showGame('dodge')">Dodge Game</button>
  <button class="nav-btn" onclick="showGame('flappy')">Flappy Bird</button>
  <button class="nav-btn" onclick="showGame('memory')">Memory Match</button>
  <button class="nav-btn" onclick="showGame('whack')">Whack-a-Mole</button>
  <button class="nav-btn" onclick="showGame('simon')">Simon Says</button>
  <button class="nav-btn" onclick="showGame('rps')">Rock-Paper-Scissors</button>
  <button class="nav-btn" onclick="showGame('tetris')">Tetris</button>
  <button class="nav-btn" onclick="showGame('maze')">Maze Runner</button>
</nav>

<!-- Game...