O Canada

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: /images/blog/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
Lake
Mountains
Toronto

Implementation

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/images/blog/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/images/blog/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/images/blog/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/images/blog/canada/toronto.jpg)
  </div>
</div>

With MDX v2, one can interleave markdown in jsx as shown in the example code.

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

Related Posts

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new featur...

read more
New features in v1

New features in v1

An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more

read more
Introducing Tailwind Nextjs Starter Blog

Introducing Tailwind Nextjs Starter Blog

Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs S...

read more
Deriving the OLS Estimator

Deriving the OLS Estimator

How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.

read more
Images in Next.js

Images in Next.js

In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.

read more
Markdown Guide

Markdown Guide

Markdown cheatsheet for all your blogging needs - headers, lists, images, tables and more! An illustrated guide based on GitHub Flavored Markdown.

read more
Sample .md file

Sample .md file

Example of a markdown file with code blocks and syntax highlighting

read more