Categories
internet tech

Recreate the Spotify Album Page with Tailwind CSS

Tailwind CSS is an excellent device that adjustments the best way we write our HTML and CSS. Tailwind is a “utility-first CSS framework” that I to start with wasn’t certain about. Our HTML will get beautiful busy when the usage of Tailwind, however I’ve discovered it isn’t that unhealthy of a tradeoff.

Table of Contents

The extra I’ve used Tailwind, the extra I’ve preferred it. It shall we me design my UI sooner than ever sooner than. People say that CSS frameworks will make you no longer know the underlying CSS. With Tailwind, I consider you wish to have to grasp your CSS even higher so as to use the application categories.

Let’s recreate one thing with Tailwind in order that we will be able to apply.

I’ve discovered some issues across the internet to rebuild with Tailwind. For this text, we will construct Spotify’s album web page UI.

We attempted construction this on a Twitch circulation. Check out the circulation to peer us attempting this reside!

Here’s the overall CodePen:

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

Let’s get began! Here’s the entire define:

<div> </div>

We’ll construct out the header first. We’ll use a containing div and two youngsters divs.


<div magnificence="flex"> <img src="https://placekitten.com/g/200/200"> <div> <h4>Playlist</h4> <h1>MIDDLE CHILD Radio</h1> <p>With J. Cole, Quavo, Ty Dollar $ign</p> <p>Created via <a>Spotify</a> - 50 songs, 3 hr 2 min</p> </div>
</div>

We have set a category of flex in order that the picture and the content material can take a seat aspect via aspect.

Let’s taste the picture. We’ll simplest wish to upload a margin to the correct of it.

<img magnificence="mr-6" src="https://placekitten.com/g/200/200">

Now we will be able to taste the content material. We’ll use Tailwind categories to structure the textual content with colour, margins, letter-spacing (monitoring), and measurement.


<div magnificence="flex"> <img magnificence="mr-6" src="https://placekitten.com/g/200/200"> <div magnificence="flex flex-col justify-center"> <h4 magnificence="mt-0 mb-2 uppercase text-gray-500 tracking-widest text-xs">Playlist</h4> <h1 magnificence="mt-0 mb-2 text-white text-4xl">MIDDLE CHILD Radio</h1> <p magnificence="text-gray-600 mb-2 text-sm">With J. Cole, Quavo, Ty Dollar $ign</p> <p magnificence="text-gray-600 text-sm">Created via <a>Spotify</a> - 50 songs, 3 hr 2 min</p> </div>
</div>

Our header content material will seem like so:

Let’s construct out our motion buttons now. We want our buttons and the “Followers” space to take a seat at the left and the correct. We’ll use flexbox and justify-content: space-between to reach this.

Here’s the HTML for our motion buttons:


<div magnificence="mt-6 flex justify-between"> <div> <button>Play</button> <button><img src="https://symbol.flaticon.com/icons/svg/2485/2485986.svg" peak="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 take a seat at the left and the correct the usage of: mt-6 flex justify-between.

Play Button

We can taste the Play button now:

<button magnificence="mr-2 bg-green-500 text-green-100 block py-2 px-8 rounded-full">Play</button>

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

Heart Button

Here is the center button:

<button magnificence="mr-2 border border-white block p-2 rounded-full"> <img src="https://symbol.flaticon.com/icons/svg/2485/2485986.svg" peak="25" width="25">
</button>

More Settings Button

This is very similar to the center button. We are simply the usage of a ... right here. In a extra manufacturing in a position application, you may need to use an icon font or an svg.

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

Followers Section

We’ll taste the fans phase with a few of Tailwind’s textual content formatting.

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

The Entire Action Buttons Section

Here is all of the motion buttons phase.


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

Here’s what all of it looks as if now:

In the songs phase, now we have what looks as if a <desk>. Whenever coding, I do my perfect to keep away from developing <desk>s. This is as a result of tables have their very own formatting this is every now and then arduous to override. Tables also are no longer the perfect to paintings with for responsive and cell.

We’ll create a couple of divs with columns to recreate Spotify’s record. We’ll get started with the heading phase. This phase has the next:

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

Here’s the HTML and styling for it:


<div magnificence="flex text-gray-600"> <div magnificence="p-2 w-8 flex-shrink-0"></div> <div magnificence="p-2 w-8 flex-shrink-0"></div> <div magnificence="p-2 w-full">Title</div> <div magnificence="p-2 w-full">Artist</div> <div magnificence="p-2 w-full">Album</div> <div magnificence="p-2 w-12 flex-shrink-0 text-right"></div>
</div>

The fascinating a part of that is how we’re sizing with flexbox. We are developing explicit widths for the primary two columns and the overall column. This is as a result of those columns are meant to be smaller; simplest an icon will probably be in those columns.

We set a width and ensure it remains at that width with flex-shrink-0. flex-shrink is a method to inform flexbox to shrink or no longer.

We are surroundings Title, Artist, and Album to w-full. This signifies that flexbox will let those three columns soak up equivalent area.

Single Song

The ultimate a part of that is to create a unmarried track. We are the usage of numerous the similar types because the header. We also are including a border to the ground of each and every track.

<div magnificence="flex border-b border-gray-800 hover:bg-gray-800"> <div magnificence="p-3 w-8 flex-shrink-0">▶️</div> <div magnificence="p-3 w-8 flex-shrink-0">❤️</div> <div magnificence="p-3 w-full">My Song Here</div> <div magnificence="p-3 w-full">Eminem</div> <div magnificence="p-3 w-full">Spotify</div> <div magnificence="p-3 w-12 flex-shrink-0 text-right">5:35</div>
</div>

Copy this row a host of occasions and now we have our ultimate product!

While this is not a 1 to 1 replica of Spotify, it displays how some distance we will be able to get with simply the default Tailwind categories. We did not have to jot down any customized CSS!

Check out our different Tailwind Recreate articles:

Hope you loved this Tailwind educational. Let us know if you wish to have extra Tailwind content material.

Like this text? Follow @chrisoncode on Twitter