JSFiddle - React, Tailwind, and code Playground

by Nikkoin

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Containers Clicáveis</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <a href="#" class="grid-item">
            <img src="path/to/image1.jpg" alt="Imagem 1">
            <h3>Título 1</h3>
            <p>Descrição do item 1.</p>
        </a>
        <a href="#" class="grid-item">
            <img src="path/to/image2.jpg" alt="Imagem 2">
            <h3>Título 2</h3>
            <p>Descrição do item 2.</p>
        </a>
                <a href="#" class="grid-item">
            <img src="path/to/image1.jpg" alt="Imagem 1">
            <h3>Título 1</h3>
            <p>Descrição do item 1.</p>
        </a>
        <a href="#" class="grid-item">
            <img src="path/to/image2.jpg" alt="Imagem 2">
            <h3>Título 2</h3>
            <p>Descrição do item 2.</p>
        </a>
                <a href="#" class="grid-item">
            <img src="path/to/image1.jpg" alt="Imagem 1">
            <h3>Título 1</h3>
            <p>Descrição do item 1.</p>
        </a>
        <a href="#" class="grid-item">
            <img src="path/to/image2.jpg" alt="Imagem 2">
            <h3>Título 2</h3>
            <p>Descrição do item 2.</p>
        </a>
    </div>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
}

.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #ccc;
    padding: 16px;
    transition: transform 0.3s;
    text-decoration: none;
    color: inherit;
}

.grid-item:hover {
    transform: scale(1.05);
}

.grid-item img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.grid-item h3 {
    margin-top: 8px;
}

.grid-item p {
    margin-top: 4px;
}