```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Grid</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(10, 50px);
            grid-gap: 5px;
            width: 550px;
            height: 550px;
            margin: 0 auto;
        }
        .cell {
            width: 50px;
            height: 50px;
            background-color: #f0f0f0;
            transition: all 0.2s ease-in-out, opacity 0.5s ease-in-out;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.2), -2px -2px 5px rgba(255,255,255,0.7), inset 1px 1px 2px rgba(255,255,255,0.3), inset -1px -1px 2px rgba(0,0,0,0.1);
            border-radius: 10px;
            transform: translateY(-2px);
            opacity: 0;
        }
        .cell:hover {
            transform: translateY(0);
            box-shadow: 1px 1px 3px rgba(0,0,0,0.2), -1px -1px 3px rgba(255,255,255,0.5), inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.5);
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div id="grid" class="grid mt-8"></div>

    <script>
        const grid = document.getElementById('grid');
        const size = 10;
        const totalCells = size * size;

        // Create grid cells
        for (let i = 0; i < totalCells; i++) {
            const cell = document.createElement('div');
            cell.className = 'cell';
            grid.appendChild(cell);
            
            // Add opacity delay animation
            setTimeout(() => {
                cell.style.opacity = '1';
            }, i * 50);
        }
    </script>
</body>
</html>
```

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Button Grid</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(10, 60px);
            grid-gap: 10px;
            width: 700px;
            height: 700px;
            margin: 0 auto;
        }
        .cell {
            width: 60px;
            height: 60px;
            background-color: #f0f0f0;
            transition: all 0.2s ease-in-out, opacity 0.5s ease-in-out;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
            border-radius: 12px;
            transform: translateY(0);
            opacity: 0;
            border: 2px solid #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            font-size: 18px;
            color: #333;
            font-weight: bold;
        }
        .cell:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08);
            cursor: pointer;
            background-color: #e8e8e8;
        }
        .cell:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08);
            background-color: #d8d8d8;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div id="grid" class="grid mt-8"></div>

    <script>
        const grid = document.getElementById('grid');
        const size = 10;
        const totalCells = size * size;

        // Create grid cells
        for (let i = 0; i < totalCells; i++) {
            const cell = document.createElement('button');
            cell.className = 'cell';
            cell.textContent = i + 1;
            grid.appendChild(cell);
            
            // Add opacity delay animation
            setTimeout(() => {
                cell.style.opacity = '1';
            }, i * 50);
        }
    </script>
</body>
</html>
```









Explore two interactive grid animations with hover effects, created using HTML, CSS, and JavaScript. Each grid features a unique design and animation style.

Discover two interactive grid animations with hover effects, showcasing unique designs and animation styles using HTML, CSS, and JavaScript.

Skeumorphic Grid