- Getting Started
- Upgrade Guide
- Integration Guide
- Customization
- Components
- Feedback
- Third-Party Plugins
Tailwind CSS Gallery - React
Use our React and Tailwind CSS gallery for displaying images in a grid layout. The gallery is a great way to showcase your images in a clean and organized way.
See below our gallery examples that you can use in your Tailwind CSS and React project. The examples comes in different styles, so you can adapt it easily to your needs.
#Gallery Demo
Here's how to implement a simple and responsive gallery component. It can be used for displaying images in a 3x3 grid layout.
export function GalleryDemo() {
const data = [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
];
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
{data.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center w-full h-40 max-w-full rounded-lg"
src={imageLink}
alt="gallery-photo"
/>
</div>
))}
</div>
);
}
export function GalleryDemo() {
const data = [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
];
return (
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
{data.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center w-full h-40 max-w-full rounded-lg"
src={imageLink}
alt="gallery-photo"
/>
</div>
))}
</div>
);
}
#Masonry Grid Gallery
Use this masonry grid gallery to display images in a grid layout. The masonry grid layout is a great way to showcase your images in a clean and organized way based on the images height.
export function MasonryGridGallery() {
return (
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://docs.material-tailwind.com/img/team-3.jpg"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://docs.material-tailwind.com/img/team-3.jpg"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
alt="gallery-photo"
/>
</div>
</div>
</div>
);
}
export function MasonryGridGallery() {
return (
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://docs.material-tailwind.com/img/team-3.jpg"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg "
src="https://docs.material-tailwind.com/img/team-3.jpg"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
</div>
<div className="grid gap-4">
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1552960562-daf630e9278b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
alt="gallery-photo"
/>
</div>
<div>
<img
className="object-cover object-center h-auto max-w-full rounded-lg"
src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
alt="gallery-photo"
/>
</div>
</div>
</div>
);
}
#Featured Image Gallery
Use this image gallery example to display a large image with a grid of smaller images below. When you click on a smaller image, the large image will change to the selected image.
import React from "react";
export function FeaturedImageGallery() {
const data = [
{
imgelink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
];
const [active, setActive] = React.useState(
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
);
return (
<div className="grid gap-4">
<div>
<img
className="h-auto w-full max-w-full rounded-lg object-cover object-center md:h-[480px]"
src={active}
alt=""
/>
</div>
<div className="grid grid-cols-5 gap-4">
{data.map(({ imgelink }, index) => (
<div key={index}>
<img
onClick={() => setActive(imgelink)}
src={imgelink}
className="object-cover object-center h-20 max-w-full rounded-lg cursor-pointer"
alt="gallery-image"
/>
</div>
))}
</div>
</div>
);
}
import React from "react";
export function FeaturedImageGallery() {
const data = [
{
imgelink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imgelink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
];
const [active, setActive] = React.useState(
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
);
return (
<div className="grid gap-4">
<div>
<img
className="h-auto w-full max-w-full rounded-lg object-cover object-center md:h-[480px]"
src={active}
alt=""
/>
</div>
<div className="grid grid-cols-5 gap-4">
{data.map(({ imgelink }, index) => (
<div key={index}>
<img
onClick={() => setActive(imgelink)}
src={imgelink}
className="object-cover object-center h-20 max-w-full rounded-lg cursor-pointer"
alt="gallery-image"
/>
</div>
))}
</div>
</div>
);
}
#Quad Gallery
Use this quad gallery example to display images in a 2x2 grid layout. This gallery is a great way to showcase your images in a clean and organized way.
export function QuadGallery() {
const data = [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
];
return (
<div className="grid grid-cols-2 gap-2">
{data.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center h-40 max-w-full rounded-lg md:h-60"
src={imageLink}
alt=""
/>
</div>
))}
</div>
);
}
export function QuadGallery() {
const data = [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
];
return (
<div className="grid grid-cols-2 gap-2">
{data.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center h-40 max-w-full rounded-lg md:h-60"
src={imageLink}
alt=""
/>
</div>
))}
</div>
);
}
#Gallery with Tab
Use this gallery with tab example to display images in a grid layout with tabs. This gallery is a great way to group your images based on categories and display them in a clean and organized way.
import { Tabs } from "@material-tailwind/react";
export function GalleryWithTab() {
const data = [
{
label: "HTML",
value: "html",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
],
},
{
label: "React",
value: "react",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
{
label: "Vue",
value: "vue",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
],
},
{
label: "Angular",
value: "angular",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
{
label: "Svelte",
value: "svelte",
images: [
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
];
return (
<Tabs defaultValue="html">
<Tabs.List className="w-full">
{data.map(({ label, value }) => (
<Tabs.Trigger key={value} value={value} className="w-full">
{label}
</Tabs.Trigger>
))}
<Tabs.TriggerIndicator />
</Tabs.List>
{data.map(({ value, images }) => (
<Tabs.Panel
className="grid grid-cols-2 gap-4 md:grid-cols-3"
key={value}
value={value}
>
{images?.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center w-full h-40 max-w-full rounded-lg"
src={imageLink}
alt="image-photo"
/>
</div>
))}
</Tabs.Panel>
))}
</Tabs>
);
}
import { Tabs } from "@material-tailwind/react";
export function GalleryWithTab() {
const data = [
{
label: "HTML",
value: "html",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
],
},
{
label: "React",
value: "react",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
{
label: "Vue",
value: "vue",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
],
},
{
label: "Angular",
value: "angular",
images: [
{
imageLink:
"https://images.unsplash.com/photo-1499696010180-025ef6e1a8f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1432462770865-65b70566d673?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2560&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
{
label: "Svelte",
value: "svelte",
images: [
{
imageLink:
"https://demos.creative-tim.com/material-kit-pro/assets/img/examples/blog5.jpg",
},
{
imageLink:
"https://material-taillwind-pro-ct-tailwind-team.vercel.app/img/content2.jpg",
},
{
imageLink:
"https://images.unsplash.com/photo-1620064916958-605375619af8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1493&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2940&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1518623489648-a173ef7824f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2762&q=80",
},
{
imageLink:
"https://images.unsplash.com/photo-1682407186023-12c70a4a35e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2832&q=80",
},
],
},
];
return (
<Tabs defaultValue="html">
<Tabs.List className="w-full">
{data.map(({ label, value }) => (
<Tabs.Trigger key={value} value={value} className="w-full">
{label}
</Tabs.Trigger>
))}
<Tabs.TriggerIndicator />
</Tabs.List>
{data.map(({ value, images }) => (
<Tabs.Panel
className="grid grid-cols-2 gap-4 md:grid-cols-3"
key={value}
value={value}
>
{images?.map(({ imageLink }, index) => (
<div key={index}>
<img
className="object-cover object-center w-full h-40 max-w-full rounded-lg"
src={imageLink}
alt="image-photo"
/>
</div>
))}
</Tabs.Panel>
))}
</Tabs>
);
}
