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.

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.

Here's the final CodePen:

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

markup
<div>

    <!-- header -->

    <!-- action buttons -->

    <!-- song list -->

</div>

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

markup
<!-- 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.

markup
<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.

markup
<!-- 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:

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:

markup
<!-- 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.

We can style the Play button now:

markup
<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.

Here is the heart button:

markup
<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>

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.

markup
<button class="mr-2 border border-white block p-2 rounded-full">...</button>

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

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

Here is the entire action buttons section.

markup
<!-- 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:

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:

markup
<!-- 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.

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.

markup
<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!

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.

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)