We're live-coding on Twitch! Join us!

Recreate the Spotify Album Page with Tailwind CSS

Code Demo

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.

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.

What We'll Build

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:

Essential Reading: Learn React from Scratch! (2020 Edition)

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

<div>

    <!-- header -->

    <!-- action buttons -->

    <!-- song list -->

</div>

The Header

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

<!-- header -->
<div class="flex">
  <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 class="mr-6" 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 class="flex">
  <img class="mr-6" src="https://placekitten.com/g/200/200">

  <div class="flex flex-col justify-center">
    <!-- content -->
    <h4 class="mt-0 mb-2 uppercase text-gray-500 tracking-widest text-xs">Playlist</h4>
    <h1 class="mt-0 mb-2 text-white text-4xl">MIDDLE CHILD Radio</h1>

    <p class="text-gray-600 mb-2 text-sm">With J. Cole, Quavo, Ty Dollar $ign</p>
    <p class="text-gray-600 text-sm">Created by <a>Spotify</a> - 50 songs, 3 hr 2 min</p>
  </div>
</div>

Our header content will look like so:

Action Buttons

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 class="mt-6 flex justify-between">
  <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 class="mr-2 bg-green-500 text-green-100 block py-2 px-8 rounded-full">Play</button>

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

Heart Button

Here is the heart button:

<button class="mr-2 border border-white block p-2 rounded-full">
    <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 class="mr-2 border border-white block p-2 rounded-full">...</button>

Followers Section

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

<div class="text-gray-600 text-sm tracking-widest text-right">
  <h5 class="mb-1">Followers</h5>
  <p>5,055</p>
</div>

The Entire Action Buttons Section

Here is the entire action buttons section.

<!-- action buttons -->
<div class="mt-6 flex justify-between">
  <div class="flex">
    <button class="mr-2 bg-green-500 text-green-100 block py-2 px-8 rounded-full">Play</button>
    <button class="mr-2 border border-white block p-2 rounded-full"><img src="https://image.flaticon.com/icons/svg/2485/2485986.svg" height="25" width="25"></button>
    <button class="mr-2 border border-white block p-2 rounded-full">...</button>
  </div>
  <div class="text-gray-600 text-sm tracking-widest text-right">
    <h5 class="mb-1">Followers</h5>
    <p>5,055</p>
  </div>
</div>

Here's what it all looks like now:

The Songs Section

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 class="flex text-gray-600">
  <div class="p-2 w-8 flex-shrink-0"></div>
  <div class="p-2 w-8 flex-shrink-0"></div>
  <div class="p-2 w-full">Title</div>
  <div class="p-2 w-full">Artist</div>
  <div class="p-2 w-full">Album</div>
  <div class="p-2 w-12 flex-shrink-0 text-right"></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 class="flex border-b border-gray-800 hover:bg-gray-800">
  <div class="p-3 w-8 flex-shrink-0">▶️</div>
  <div class="p-3 w-8 flex-shrink-0">❤️</div>
  <div class="p-3 w-full">My Song Here</div>
  <div class="p-3 w-full">Eminem</div>
  <div class="p-3 w-full">Spotify</div>
  <div class="p-3 w-12 flex-shrink-0 text-right">5:35</div>
</div>

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

Conclusion

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:

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

Like this article? Follow @chrisoncode on Twitter

Host websites with a $100 credit