JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
  body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; }
  .grid { display: grid; grid-template-columns: repeat(3, 250px); gap: 20px; }
  .grid-item { position: relative; width: 250px; height: 250px; overflow: hidden; border-radius:10px;font-family:'calibri';}
  .grid-item:hover {transform: scale(1.1);transition: all 0.5s;cursor:pointer;}
  .grid-item img { width: 100%; height: 100%; object-fit: cover; }
  .overlay { position: absolute; bottom: 0; width: 100%; height: 20%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: bold; }
</style>
</head>
<body>
<div class="grid">
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/1.jpg" alt="Category 1"><div class="overlay">Category 1</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/2.jpg" alt="Category 2"><div class="overlay">Category 2</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/3.jpg" alt="Category 3"><div class="overlay">Category 3</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/4.jpg" alt="Category 4"><div class="overlay">Category 4</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/5.jpg" alt="Category 5"><div class="overlay">Category 5</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/6.jpg" alt="Category 6"><div class="overlay">Category 6</div></div>
  <div class="grid-item"><img src="https://new.tiktakit.com/wp-content/uploads/250/7.jpg" alt="Category 7"><div class="overlay">Category 7</div></div>
  <div class="grid-item"><img...