Subscribe

Creating a newsletter layout with Tailwind

โœ๏ธ

Creating a iconic newsletter layout with Tailwind flex and grid

25 Jan, 2021 ยท 13 min read

We have quite the extended layout for the Lifestyle blog as our blog overview.

Lifestyle blog newsletter layout design

As you can see, it's quite the "newsletter" style layout, with overlapping elements, offset elements, and non-equal recurring blocks.

In this article, I will be going through two ways of building this using Tailwind CSS

Analysing the design

Before we start building, let's begin by analyzing the design. This is an excellent process to understand how we can best make it and what elements we will need.

Having a quick look, we can see some columns that we can use.

Layout grid

Note the design is not pixel perfect, so I will adjust it so it will fix an equal column grid

What do you see in this outline?

  • Red area's 1 column spacer
  • Blue columns 6 column image
  • Green 5 column that gets sub-divided

Then we are just missing the titles and Checked and Todo category element, which we'll introduce using absolute positions.

Tailwind newsletter layout with flex

I'm far more skilled in using flex than I am using a grid, so my first attend to create this in flex.

I've divided it into two sections, so let's introduce the first section, where the title is on the left-hand side.

Note: Tailwind is built mobile-first, so we'll keep that in mind when creating the blocks.

Let's start by wrapping everything inside a flex div.

<div class="flex flex-col gap-4 mb-24 md:flex-row">
  <!-- content -->
</div>

This will be the container for the first section. We tell it to flex column on mobile but switch to row on desktop. We also add a gap between the columns and a margin bottom for the next element.

Now we will need the two sections. Left: Image + Titel (total of 7 columns) Right: Image + Summary (total of 6 columns)

<div class="flex flex-col gap-4 mb-24 md:flex-row">
  <div class="relative w-full md:w-7/12">
    <!-- LEFT -->
  </div>
  <div class="w-full md:w-5/12">
    <!-- RIGHT -->
  </div>
</div>

We make both sections 100% width for mobile, but we span them over the columns we want for desktop.

The left column is also relative since we will be placing the title and category element absolute inside it.

Let's add the left elements we will need, and I'll walk you through the styling.

<div class="flex flex-col gap-4 mb-24 md:flex-row">
  <div class="relative w-full md:w-7/12">
    <div class="absolute mt-4">
      <span
        class="absolute flex w-full h-0.5 -mr-4 bg-purple -right-full top-1/2"
      ></span>
      Health
    </div>
    <div
      class="absolute flex items-center w-1/2 min-h-full text-3xl font-black text-purple"
    >
      Lorem Ipsum Dolar
    </div>
    <div class="min-h-full ml-20">
      <img
        class="object-cover h-full"
        src="https://via.placeholder.com/800x600"
      />
    </div>
  </div>
  <div class="w-full md:w-5/12">
    <!-- RIGHT -->
  </div>
</div>

Quite a big chunk, but we start by adding the category called Health. You will see its absolute position with a margin-top. This will offset it from the top a little bit. Inside that, you find the <span> element used to create the purple line to the right.

The next element is the actual text. We also position this absolute but use flex to span it over the full height and use items-center to get the text in the middle.

Then the last element is the image. We make this smaller by adding the ml-20 (margin-left).

By now, we should have the following result:

Tailwind newsletter layout - left side

On to the right side.

As seen in the design, the right side spans an image on top and a descriptive text below that. This text is positioned at the bottom of the element and is only half the width.

<div class="flex flex-col gap-4 mb-24 md:flex-row">
  <div class="relative w-full md:w-7/12">
    <div class="absolute mt-4">
      <span
        class="absolute flex w-full h-0.5 -mr-4 bg-purple -right-full top-1/2"
      ></span
      >Health
    </div>
    <div
      class="absolute flex items-center w-1/2 min-h-full text-3xl font-black text-purple"
    >
      Lorem Ipsum Dolar
    </div>
    <div class="min-h-full ml-20">
      <img
        class="object-cover h-full"
        src="https://via.placeholder.com/800x600"
      />
    </div>
  </div>
  <div class="w-full md:w-5/12">
    <img
      class="object-cover w-full h-1/2"
      src="https://via.placeholder.com/800x600"
    />
    <p
      class="flex items-end w-full mt-4 font-bold md:w-1/2 h-1/2 text-purple md:mt-0"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus
      iaculis ante, et iaculis ipsum accumsan sit amet.
    </p>
  </div>
</div>

The image is directly placed inside the right column, using a full width with object-cover to make it span the parent.

Then the text uses flex with the items-end class to get the reader to the bottom. You will also see the md:w-1/2 class, making it only 50% on desktop screens.

That is it. We should now have the following responsive layout element for the first one:

The next element is very similar. The only different thing is the position of the title is reversed, and the left side is a column layout.

<div class="flex flex-col-reverse gap-4 md:flex-row">
  <div class="flex flex-col w-full gap-4 md:w-5/12 md:flex-row">
    <div class="w-full md:w-1/2">
      <img
        class="object-cover w-full h-full"
        src="https://via.placeholder.com/800x600"
      />
    </div>
    <p class="w-full font-bold md:w-1/2 text-purple">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus
      iaculis ante, et iaculis ipsum accumsan sit amet.
    </p>
  </div>
  <div class="relative w-full md:w-7/12">
    <div class="absolute right-0 mt-4">
      <span
        class="absolute flex w-full h-0.5 -ml-4 bg-purple -left-full top-1/2"
      ></span
      >Health
    </div>
    <div
      class="absolute right-0 flex items-center w-1/2 min-h-full text-3xl font-black text-purple"
    >
      Lorem Ipsum Dolar
    </div>
    <div class="min-h-full mr-20">
      <img
        class="object-cover h-full"
        src="https://via.placeholder.com/800x600"
      />
    </div>
  </div>
</div>

A super important element here is the top-level flex-col-reverse. This makes sure that the bigger right side is on top of mobile devices!

A super nighty flex function!

You can find this complete example on the following Codepen.

See the Pen yLawjgQ by Chris Bongers (@rebelchris) on CodePen.

Tailwind newsletter layout with grid

We made it, it was working, and that would have been it. However, I had a feeling this would be a better fit for CSS Grid.

So I put out a tweet asking for some tips on doing this with Tailwind Grid.

I started converting what I had into a grid layout with the feedback, and it went surprisingly well.

It was more difficult for me to make this in a CSS grid, so bear with me as there might be a more efficient way of doing this grid layout.

Let's start with the first block again.

<div class="grid grid-flow-row grid-cols-12 grid-rows-2 gap-4">
  <!-- CONTENT -->
</div>

We create a 12 column grid with two rows and add a gap as we did in the flex layout.

I'm using a column/row-start combination method to overflow the elements.

As you might see, I will add starting positions for each element, which allows them to sit on top of each other.

Let's start with the first column, which is the title column.

<div class="grid grid-flow-row grid-cols-12 grid-rows-2 gap-4">
  <div
    class="relative z-50 flex items-center col-span-12 col-start-1 row-span-2 row-start-1 md:col-span-4 md:col-start-1"
  >
    <div class="absolute top-0 mt-4">
      <span
        class="absolute flex w-full h-0.5 -mr-4 bg-purple -right-full top-1/2"
      ></span
      >Health
    </div>
    <h1 class="text-3xl font-black text-purple">Lorem Ipsum Dolar</h1>
  </div>
</div>

We make this a span 4, and on mobile, we turn it into a span-12. Inside we have the category and title again, using flex to align them accordingly.

The best way to show how this works is using the grid explorer in Chrome/Firefox

Testing the grid in grid explorer Chrome

You can see the 12 column grid, with the left element highlighted. You can see it spans over four columns.

The next element is the big image on the left, spanning 6 columns, starting from the second.

<div class="grid grid-flow-row grid-cols-12 grid-rows-2 gap-4">
  <div
    class="relative z-50 flex items-center col-span-12 col-start-1 row-span-2 row-start-1 md:col-span-4 md:col-start-1"
  >
    <div class="absolute top-0 mt-4">
      <span
        class="absolute flex w-full h-0.5 -mr-4 bg-purple -right-full top-1/2"
      ></span
      >Health
    </div>
    <h1 class="text-3xl font-black text-purple">Lorem Ipsum Dolar</h1>
  </div>
  <div
    class="col-span-11 col-start-2 row-span-2 row-start-1 md:col-span-6 md:col-start-2"
  >
    <img
      class="object-cover h-full"
      src="https://via.placeholder.com/800x600"
    />
  </div>
</div>

Here, we add the col-span-11 for mobile and md:col-span-6 for desktop. We also offset it to start on column two.

The two columns on the right are both the same, but they only span 1 row and 5 columns.

<div class="grid grid-flow-row grid-cols-12 grid-rows-2 gap-4">
  <div
    class="relative z-50 flex items-center col-span-12 col-start-1 row-span-2 row-start-1 md:col-span-4 md:col-start-1"
  >
    <div class="absolute top-0 mt-4">
      <span
        class="absolute flex w-full h-0.5 -mr-4 bg-purple -right-full top-1/2"
      ></span
      >Health
    </div>
    <h1 class="text-3xl font-black text-purple">Lorem Ipsum Dolar</h1>
  </div>
  <div
    class="col-span-11 col-start-2 row-span-2 row-start-1 md:col-span-6 md:col-start-2"
  >
    <img
      class="object-cover h-full"
      src="https://via.placeholder.com/800x600"
    />
  </div>
  <div class="col-span-12 row-span-1 md:col-span-5">
    <img
      class="object-cover w-full h-full"
      src="https://via.placeholder.com/800x600"
    />
  </div>
  <div class="flex items-end col-span-12 row-span-1 md:col-span-5">
    <p class="w-full font-bold md:w-1/2 text-purple">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus
      iaculis ante, et iaculis ipsum accumsan sit amet.
    </p>
  </div>
</div>

This will give us the following result:

Tailwind responsive grid newsletter

The bottom element is a copy but spans the two left columns on two rows.

Also, on mobile, it switches their position to rows 3 and 4.

<div class="grid grid-flow-row grid-cols-12 grid-rows-2 gap-4 mt-24">
  <div
    class="col-span-12 col-start-1 row-span-1 row-start-3 md:row-span-2 md:col-span-3 md:row-start-1"
  >
    <img
      class="object-cover w-full h-full"
      src="https://via.placeholder.com/800x600"
    />
  </div>
  <div
    class="col-span-12 col-start-1 row-span-1 row-start-4 md:row-span-2 md:col-span-3 md:row-start-1 md:col-start-4"
  >
    <p class="font-bold text-purple">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus
      iaculis ante, et iaculis ipsum accumsan sit amet.
    </p>
  </div>
  <div
    class="col-span-11 col-start-1 row-span-2 row-start-1 md:col-span-5 md:col-start-7"
  >
    <img
      class="object-cover h-full"
      src="https://via.placeholder.com/800x600"
    />
  </div>
  <div
    class="relative flex items-center justify-end col-span-3 col-start-10 row-span-2 row-start-1"
  >
    <div class="absolute top-0 right-0 mt-4">
      <span
        class="absolute flex w-full h-0.5 -ml-4 bg-purple -left-full top-1/2"
      ></span
      >Health
    </div>
    <h1 class="text-3xl font-black text-purple">Lorem Ipsum Dolar</h1>
  </div>
</div>

This gives us the following result you can try out in Codepen.

See the Pen Tailwind newsletter layout with grid by Chris Bongers (@rebelchris) on CodePen.

I would love to hear what you guys think of these approaches and what you would pick.

The flex one is just a little bit easier to set up, but it might be because I've used it more.

The grid looks powerful, especially if we named the grid elements.

You can find today's code on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 ยท 5 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 ยท 4 min read

Tailwind CSS Numeric font variants

Join 1371 devs and subscribe to my newsletter