--- title: O Canada date: '2017-07-15' tags: ['holiday', 'canada', 'images'] draft: false summary: 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. --- # O Canada 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: `/static/images/canada/[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
![Maple](/static/images/canada/maple.jpg)
![Lake](/static/images/canada/lake.jpg)
![Mountains](/static/images/canada/mountains.jpg)
![Toronto](/static/images/canada/toronto.jpg)
# Implementation ```js
![Maple](/static/images/canada/maple.jpg)
![Lake](/static/images/canada/lake.jpg)
![Mountains](/static/images/canada/mountains.jpg)
![Toronto](/static/images/canada/toronto.jpg)
``` With MDX v2, one can interleave markdown in jsx as shown in the example code. ### Photo Credits
Maple photo by [Guillaume Jaillet](https://unsplash.com/@i_am_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Mountains photo by [John Lee](https://unsplash.com/@john_artifexfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Lake photo by [Tj Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Toronto photo by [Matthew Henry](https://unsplash.com/@matthewhenry?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/canada?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)