Recreate the Spotify Album Page with Tailwind CSS

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff.

Table of Contents

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

Let's recreate something with Tailwind so that we can practice.

I've found some things around the web to rebuild with Tailwind. For this article, we'll build Spotify's album page UI.

We tried building this on a Twitch stream. Check out the stream to see us trying this live!

Here's the final CodePen :

Let's get started! Here's the overall outline:

<div>

    <!-- header -->

    <!-- action buttons -->

    <!-- song list -->

</div>

We'll build out the header first. We'll use a containing div and two children divs.

<!-- header -->
<div>
  <img src="https://placekitten.com/g/200/200">

  <div>
    <!-- content -->
    <h4>Playlist</h4>
    <h1>MIDDLE CHILD Radio</h1>

    <p>With J. Cole, Quavo, Ty Dollar $ign</p>
    <p>Created by <a>Spotify</a> - 50 songs, 3 hr 2 min</p>
  </div>
</div>

We have set a class of flex so that the image and the content can sit side by side.

Let's style the image. We'll only need to add a margin to the right of it.

<img src="https://placekitten.com/g/200/200">

Now we can style the content. We'll use Tailwind classes to format the text with color, margins, letter-spacing (tracking), and size.

<!-- header -->
<div>
  <img src="https://placekitten.com/g/200/200">

  <div>
    <!-- content -->
    <h4>Playlist</h4>
    <h1>MIDDLE CHILD Radio</h1>

    <p>With J. Cole, Quavo, Ty Dollar $ign</p>
    <p>Created by <a>Spotify</a> - 50 songs, 3 hr 2 min</p>
  </div>
</div>

Our header content will look like so:

Let's build out our action buttons now. We need our buttons and the "Followers" area to sit on the left and the right. We'll use flexbox and justify-content: space-between to achieve this.

Here's the HTML for our action buttons:

<!-- action buttons -->
<div>
  <div>
    <button>Play</button>
    <button><img src="https://image.flaticon.com/icons/svg/2485/2485986.svg" height="25" width="25"></button>
    <button>...</button>
  </div>

  <div>
    <h5>Followers</h5>
    <p>5,055</p>
  </div>
</div>

We've added some margin and set our two sections to sit on the left and the right using: mt-6 flex justify-between .

Play Button

We can style the Play button now:

<button>Play</button>

This will give us a play button similar to Spotify's.

Heart Button

Here is the heart button:

<button>
    <img src="https://image.flaticon.com/icons/svg/2485/2485986.svg" height="25" width="25">
</button>

More Settings Button

This is similar to the heart button. We are just using a ... here. In a more production ready application, you would want to use an icon font or an svg.

<button>...</button>

Followers Section

We'll style the followers section with some of Tailwind's text formatting.

<div>
  <h5>Followers</h5>
  <p>5,055</p>
</div>

The Entire Action Buttons Section

Here is the entire action buttons section.

<!-- action buttons -->
<div>
  <div>
    <button>Play</button>
    <button><img src="https://image.flaticon.com/icons/svg/2485/2485986.svg" height="25" width="25"></button>
    <button>...</button>
  </div>
  <div>
    <h5>Followers</h5>
    <p>5,055</p>
  </div>
</div>

Here's what it all looks like now:

In the songs section, we have what looks like a <table> . Whenever coding, I do my best to avoid creating <table> s. This is because tables have their own formatting that is sometimes hard to override. Tables are also not the easiest to work with for responsive and mobile.

We'll create a few divs with columns to recreate Spotify's list. We'll start with the heading section. This section has the following:

• Spot for a play button
• Spot for a heart button
• Title
• Artist
• Album
• Time

Here's the HTML and styling for it:

<!-- song list header -->
<div>
  <div></div>
  <div></div>
  <div>Title</div>
  <div>Artist</div>
  <div>Album</div>
  <div>⏱</div>
</div>

The interesting part of this is how we are sizing with flexbox. We are creating specific widths for the first two columns and the final column. This is because these columns are supposed to be smaller; only an icon will be in these columns.

We set a width and make sure it stays at that width with flex-shrink-0 . flex-shrink is a way to tell flexbox to shrink or not.

We are setting Title, Artist, and Album to w-full . This means that flexbox will let these three columns take up equal space.

Single Song

The last part of this is to create a single song. We are using a lot of the same styles as the header. We are also adding a border to the bottom of each song.

<div>
  <div>▶️</div>
  <div>❤️</div>
  <div>My Song Here</div>
  <div>Eminem</div>
  <div>Spotify</div>
  <div>5:35</div>
</div>

Copy this row a bunch of times and we have our final product!

While this isn't a 1 to 1 copy of Spotify, it shows how far we can get with just the default Tailwind classes. We didn't have to write any custom CSS!

Check out our other Tailwind Recreate articles:

• Tweet Creation Modal with Tailwind CSS
• Google.com with Tailwind CSS

Hope you liked this Tailwind tutorial. Let us know if you want more Tailwind content.

Like this article? Follow @chrisoncode on Twitter