The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.
Features images served using next/image component. The locally stored images are located in a folder with the following path: /[filename].jpg
Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.
Gallery
Implementation
jsx<div className="-mx-2 flex flex-wrap overflow-hidden mt-6">
<SlideshowImage src="/canada-1.jpg" alt="Maple" className="my-1 w-full overflow-hidden px-1 xl:my-1 xl:w-1/2" group="canada" />
<SlideshowImage src="/canada-2.jpg" alt="Lake" className="my-1 w-full overflow-hidden px-1 xl:my-1 xl:w-1/2" group="canada" />
<SlideshowImage src="/canada-3.jpg" alt="Mountains" className="my-1 w-full overflow-hidden px-1 xl:my-1 xl:w-1/2" group="canada" />
<SlideshowImage src="/canada-4.jpg" alt="Toronto" className="my-1 w-full overflow-hidden px-1 xl:my-1 xl:w-1/2" group="canada" />
</div>With MDX v2, we can use custom components directly in our markdown content.
Photo Credits
Maple photo by Guillaume Jaillet on Unsplash
Mountains photo by John Lee on Unsplash
Lake photo by Tj Holowaychuk on Unsplash
Toronto photo by Matthew Henry on Unsplash