Tailwind CSS Grid Generator

How to Use the Generated Code

1. Copy Tailwind Classes: Click "Copy Tailwind Classes" to get classes (e.g., grid grid-cols-3 gap-x-1 gap-y-1). Add to a <div> in your HTML.
2. Copy HTML: Click "Copy HTML" to get the grid container and items. Paste into your HTML file.
3. Download Full Code: Click "Download Full Code" to get a .html file with Tailwind CSS (via CDN), styles, and HTML. Open in a browser to see the grid.
4. Setup Tailwind CSS: For your project, include Tailwind via CDN (<script src="https://cdn.tailwindcss.com"></script>) or install it (see Tailwind CSS documentation).
5. Customize: Edit .grid-item content (e.g., add images, text) and adjust styles.
Example (included in the downloaded file):

<style>
.grid-container {
    @apply grid grid-cols-3 gap-x-1 gap-y-1;
}
.grid-item {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
                            

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    ...
</div>