Published on

The Ninja Guide To How To Build A Tailwind Spotify Player With Tailwind CSS Better

Tags
PagesWidget
Tailwind Spotify Player

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Tailwind Spotify Player ui component

Also see on codepen.io/egoistdeveloper/pen/abezoyv

Why use Tailwind CSS to build a Tailwind Spotify Player ui component?

  • It can make the building process of Tailwind Spotify Player ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Tailwind Spotify Player component file.

The preview of Tailwind Spotify Player ui component

Free download of the Tailwind Spotify Player's source code

The source code of Tailwind Spotify Player ui component

<!-- MDI Icons -->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/6.5.95/css/materialdesignicons.min.css" />

<!-- AlpineJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.8.1/cdn.min.js" defer></script>

<!-- Quicksand -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500&display=swap" rel="stylesheet">

<style>
    html, body {
        font-family: 'Quicksand', sans-serif;
    }

    /* alpinejs */
    [x-cloak] {
        display: none !important;
    }

    /* custom rounded classes */
    .rounded-xxl {
        border-radius: 30px;
    }

    .rounded-t-xxl {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    .rounded-b-xxl {
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }

    /* Range Input */

    .x-slider * {
        width: 350px !important;
    }

    .x-slider input::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #636363;
        border: 5px solid #24c55d;
        box-shadow: 0px 0px 40px -4px rgba(0, 0, 0, 0.76);
        transition: all 0.1s ease-in-out;
        outline: none;
        appearance: none;
    }

    .x-slider input::-webkit-slider-thumb:hover {
        border-color: #1bb350;
    }

    /* Player Controls */
    .x-player-controls .play-pause{
        transform: scale(3);
    }

    .x-player-controls .play-pause:hover{
        transform: scale(3.1);
    }

    .x-player-controls .center-controls{
        transform: scale(2.5);
    }

    .x-player-controls .center-controls:hover{
        transform: scale(2.7);
    }

    .x-player-controls .side-controls{
        transform: scale(1.8);
    }

    .x-player-controls .side-controls:hover{
        transform: scale(2);
    }
</style>

<!-- Page Container -->
<div class="flex flex-col items-center justify-center bg-white" x-cloak x-data="appData()" x-init="appInit()">

    <!-- Player -->
    <div class="relative min-h-screen bg-white
            rounded-xxl bg-amber-500 w-96 mx-auto my-20">

        <!-- Player Cover -->
        <img class="absolute rounded-xxl object-cover h-full w-full"
            src="https://images.unsplash.com/photo-1619983081563-430f63602796?fit=crop&w=450&h=800&q=80"
            alt="Product Preview" />

        <div class="flex flex-col absolute h-full w-full">
            <!-- Top -->
            <div class="flex-none group h-20 w-fit-screen rounded-t-xxl mb-auto">
                <!-- Shadow Bar -->
                <div class="flex flex-row flex-grow justify-start rounded-t-xxl
                    h-16 w-fit-screen px-3 space-x-2
                    bg-gradient-to-b from-black/70 via-gray-800/70 to-transparent
                    opacity-80 group-hover:opacity-100
                    transition-all ease-in-out duration-200 delay-100">

                    <!-- Slide Down Button -->
                    <button class="flex-none px-1 h-10 w-10 my-auto hover:scale-125
                        transition-all duration-200 ease-in-out" title="Slide Down">
                        <i class="mdi mdi-chevron-down text-2xl text-gray-200
                            hover:text-white transition-all duration-200"></i>
                    </button>

                    <!-- Grow Space -->
                    <div class="grow"></div>

                    <!-- Share Button -->
                    <button class="flex-none h-10 w-10 my-auto hover:scale-125
                        transition-all duration-200 ease-in-out" title="Share With">
                        <i class="mdi mdi-share-variant-outline text-xl text-gray-200
                            hover:text-white transition-all duration-200"></i>
                    </button>

                    <!-- Options Button -->
                    <button class="flex-none h-10 w-10 my-auto hover:scale-125
                        transition-all duration-200 ease-in-out" title="Show Options">
                        <i class="mdi mdi-dots-vertical text-2xl text-gray-200
                            hover:text-white transition-all duration-200"></i>
                    </button>
                </div>
            </div>

            <div class="my-auto"></div>

            <!-- Player -->
            <div class="flex-none group h-2/4 w-fit-screen rounded-b-xxl mt-auto backdrop-blur-md">
                <!-- Shadow Bar -->
                <div class="flex flex-col justify-start rounded-b-xxl
                    h-full w-fit-screen px-3 space-x-2 my-auto
                    bg-black/70 via-gray-800/70 to-transparent
                    opacity-95 group-hover:opacity-100
                    transition-all ease-in-out duration-200 delay-100">

                    <!-- Song Details -->
                    <div class="flex flex-row flex-grow justify-start mt-3 pl-2">
                        <div class="flex flex-col">
                            <div class="text-gray-400/90 text-xl font-semibold select-none">
                                Kalbimi Kırdın
                            </div>

                            <div class="text-gray-500/90 text-base font-semibold select-none">
                                Zeynep Yastık & Yorgan
                            </div>
                        </div>

                        <!-- Grow Space -->
                        <div class="grow"></div>

                        <div class="flex flex-row">
                            <!-- Make Karaoke -->
                            <button class="flex-none px-1 h-10 w-10 my-auto hover:scale-125 rotate-45
                                transition-all duration-200 ease-in-out" title="Karaoke">
                                <i class="mdi mdi-microphone-variant text-2xl text-gray-200
                                    hover:text-white transition-all duration-200"></i>
                            </button>

                            <!-- Like This Song -->
                            <button class="flex-none px-1 h-10 w-10 my-auto hover:scale-125
                                transition-all duration-200 ease-in-out" title="Like This Song">
                                <i class="mdi mdi-heart text-2xl text-green-500 shadow-lg
                                    hover:text-white transition-all duration-200"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Player Slider Container -->
                    <div class="x-slider flex relative my-3">
                        <!-- Player Slider -->
                        <div class="x-slider inline justify-center rounded-md">
                            <!-- Range Input -->
                            <input class="absolute bg-transparent rounded-md
                                z-10 h-1 w-80 outline-0 appearance-none" type="range"
                                step="1" min='0' max="100" value="0"
                                x-model="sliderValue"
                                x-on:change.debounce="sliderProgressTime = sliderProgressToTime(sliderValue, songLength)">

                            <!-- Slider Placeholder -->
                            <div class="absolute z-0 w-80 h-0.5 mt-0.5 rounded-md bg-gray-500/70"></div>

                            <!-- Progress -->
                            <div class="absolute z-0 w-80 h-1.5 rounded-md bg-green-600
                                bg-gradient-to-r from-emerald-700 to-green-500"
                                x-bind:style="'width: ' + (sliderValue * 3.5) + 'px !important; '"></div>
                            <!-- x-slider is width 350px -->
                        </div>
                    </div>

                    <!-- Duration Container -->
                    <div class="flex flex-row flex-grow justify-start px-0.5">
                        <!-- Current Time -->
                        <div class="text-gray-500/90 text-sm select-none" x-text="sliderProgressTime"></div>

                        <!-- Grow Space -->
                        <div class="grow"></div>

                        <!-- Total Time -->
                        <div class="text-gray-400/90 text-sm select-none pr-1" x-text="secondsToDuration(songLength)"></div>
                    </div>

                    <!-- Player Controls Container -->
                    <div class="x-player-controls flex flex-row flex-grow justify-start 
                        space-x-8 mx-4 px-3">
                        <!-- Suffle -->
                        <button class="side-controls flex-none px-1 h-10 w-10 my-auto
                            transition-all duration-200 ease-in-out" title="Suffle">
                            <i class="mdi mdi-gamepad-circle-right text-gray-300/90
                                hover:text-white transition-all duration-200"></i>
                        </button>

                        <!-- Previous - Begining -->
                        <button class="center-controls flex-none px-1 h-10 w-10 my-auto
                            transition-all duration-200 ease-in-out" title="Previous">
                            <i class="mdi mdi-skip-previous-outline text-2xl text-gray-200/95
                                hover:text-white transition-all duration-200"></i>
                        </button>

                        <!-- Play - Pause -->
                        <button class="play-pause flex-none px-1 h-10 w-10 my-auto
                            transition-all duration-200 ease-in-out" title="Play/Pause">
                            <i class="mdi mdi-play-circle-outline text-2xl text-gray-200
                                hover:text-white transition-all duration-200"></i>
                        </button>

                        <!-- Next - End -->
                        <button class="center-controls flex-none px-1 h-10 w-10 my-auto
                            transition-all duration-200 ease-in-out" title="Next Song">
                            <i class="mdi mdi-skip-next-outline text-2xl text-gray-200/95
                                hover:text-white transition-all duration-200"></i>
                        </button>

                        <!-- Repeat -->
                        <button class="side-controls flex-none px-1 h-10 w-10 my-auto
                            transition-all duration-200 ease-in-out" title="Repeat">
                            <i class="mdi mdi-repeat text-gray-300/90
                                hover:text-white transition-all duration-200"></i>
                        </button>
                    </div>

                    <!-- Source Playlist -->
                    <div class="flex flex-row flex-grow justify-start 
                        border-t border-gray-600/50 mt-5 pt-1">
                        <!-- Album -->
                        <button class="side-controls flex-none 
                            h-10 w-10 my-auto hover:scale-125
                            transition-all duration-200">
                            <!-- Cover -->
                            <img class="h-8 w-8 rounded-full border border-gray-600" 
                                src="https://images.unsplash.com/photo-1612982663544-54e9d6d2818d?fit=crop&w=50&h=50&q=80" alt="Album">
                        </button>

                        <!-- Playlist -->
                        <div class="flex flex-col my-auto mx-2 ">
                            <!-- Title -->
                            <div class="text-gray-500/90 text-xs font-semibold select-none cursor-pointer">
                                From Playlist
                            </div>

                            <!-- Playlist Name -->
                            <div class="text-gray-300/90 text-base font-semibold select-none cursor-pointer">
                                Daily Discover
                            </div>
                        </div>

                        <!-- Grow Space -->
                        <div class="grow"></div>

                        <!-- Slide Down Button -->
                        <button class="flex-none px-1 h-10 w-10 my-auto hover:scale-125
                            transition-all duration-200 ease-in-out" title="Show Playlist">
                            <i class="mdi mdi-chevron-up text-2xl text-gray-200
                                hover:text-white transition-all duration-200"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notes -->
    <span class="text-center font-bold my-20">
        MDI (npm i @mdi/font) reuqired for icons

        <hr class="my-4">

        <a href="https://egoistdeveloper.github.io/twcss-to-sass-playground/" target="_blank" class="text-blue-600">
            Convetert to SASS
        </a>

        <hr class="my-4">

        <a href="https://www.tailwindcsscomponent.com/progress-slider-component" target="_blank" class="text-blue-600">
            Standalone Slider Component
        </a>

        <hr class="my-4">

        <a href="https://unsplash.com/photos/QzpgqElvSiA" target="_blank" class="text-blue-600">
            Cover Image
        </a>

        <hr class="my-4">

        <a href="https://unsplash.com/photos/af0KTGlI4ss" target="_blank" class="text-blue-600">
            Playlist Image
        </a>
    </span>
</div>

<script>
    function appData() {
        return {
            sliderValue: 50,
            songLength: 250,
            sliderProgressTime: '00:00',

            appInit() {
                this.sliderProgressTime = this.sliderProgressToTime(this.sliderValue, this.songLength);
            },

            /*
            * Convert slider value to time
            */
            secondsToDuration(seconds) {
                var minutes = Math.floor(seconds / 60).toFixed(0),
                    seconds = Math.floor(seconds % 60).toFixed(0);

                return minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
            },

            /*
            * Slider progress value to time
            */
            sliderProgressToTime(sliderValue, songLength) {
                return this.secondsToDuration((songLength / 100) * sliderValue);
            }
        }
    }
</script>

How to build a Tailwind Spotify Player with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to build a Tailwind Spotify Player component

  • flex
  • flex-col
  • bg-white
  • relative
  • min-h-screen
  • bg-amber-500
  • w-96
  • mx-auto
  • my-20
  • absolute
  • h-full
  • w-full
  • flex-none
  • h-20
  • w-fit-screen
  • mb-auto
  • flex-row
  • flex-grow
  • justify-start
  • h-16
  • px-3
  • bg-gradient-to-b
  • px-1
  • h-10
  • w-10
  • my-auto
  • text-2xl
  • hover:text-white
  • text-xl
  • h-2/4
  • mt-auto
  • bg-black/70
  • mt-3
  • pl-2
  • text-gray-400/90
  • text-gray-500/90
  • text-base
  • text-green-500
  • my-3
  • inline
  • bg-transparent
  • z-10
  • h-1
  • w-80
  • z-0
  • h-0.5
  • mt-0.5
  • bg-gray-500/70
  • h-1.5
  • bg-gradient-to-r
  • px-0.5
  • text-sm
  • pr-1
  • mx-4
  • border-t
  • border-gray-600/50
  • mt-5
  • pt-1
  • h-8
  • w-8
  • border-gray-600
  • mx-2
  • text-xs
  • text-gray-300/90
  • text-center
  • my-4
  • text-blue-600

67 steps to build a Tailwind Spotify Player component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Use flex to create a block-level flex container.

  3. Control the background color of an element to white using the bg-white utilities.

  4. Use relative to position an element according to the normal flow of the document.

  5. Set the minimum width/height of an element using the min-h-screen utilities.

  6. Control the background color of an element to amber-500 using the bg-amber-500 utilities.

  7. Use w-96 to set an element to a fixed width(24rem).

  8. Control the horizontal margin of an element to auto using the mx-auto utilities.

  9. Control the vertical margin of an element to 5rem using the my-20 utilities.

  10. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  11. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  12. Use w-full to set an element to a 100% based width.

  13. Use flex to create a block-level flex container.

  14. Use h-20 to set an element to a fixed height(5rem).

  15. Use w-fit-screen to set an element to a fixed width(fit-screen).

  16. Control the margin on bottom side of an element to auto using the mb-auto utilities.

  17. Use flex to create a block-level flex container.

  18. Use flex to create a block-level flex container.

  19. Use justify-start to justify items against the start of the container’s main axis.

  20. Use h-16 to set an element to a fixed height(4rem).

  21. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  22. Control the background color of an element to gradient-to-b using the bg-gradient-to-b utilities.

  23. Control the horizontal padding of an element to 0.25rem using the px-1 utilities.

  24. Use h-10 to set an element to a fixed height(2.5rem).

  25. Use w-10 to set an element to a fixed width(2.5rem).

  26. Control the vertical margin of an element to auto using the my-auto utilities.

  27. Control the text color of an element to 2xl using the text-2xl utilities.

  28. Control the text color of an element to white on hover using the hover:text-white utilities.

  29. Control the text color of an element to xl using the text-xl utilities.

  30. Use h-2/4 to set an element to a fixed height(2/4).

  31. Control the margin on top side of an element to auto using the mt-auto utilities.

  32. Control the background color of an element to black/70 using the bg-black/70 utilities.

  33. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  34. Adjust the left padding of an element to 0.5rem using the pl-2 utilities class

  35. Control the text color of an element to gray-400/90 using the text-gray-400/90 utilities.

  36. Control the text color of an element to gray-500/90 using the text-gray-500/90 utilities.

  37. Control the text color of an element to base using the text-base utilities.

  38. Control the text color of an element to green-500 using the text-green-500 utilities.

  39. Control the vertical margin of an element to 0.75rem using the my-3 utilities.

  40. Use inline utilities to control the flow of text inside the element to wrap normally.

  41. Control the background color of an element to transparent using the bg-transparent utilities.

  42. Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the z-10 utilities.

  43. Use h-1 to set an element to a fixed height(0.25rem).

  44. Use w-80 to set an element to a fixed width(20rem).

  45. Control the stack order (or three-dimensional positioning) of an element to 0 in Tailwind, regardless of order it has been displayed, using the z-0 utilities.

  46. Use h-0.5 to set an element to a fixed height(0.5).

  47. Control the margin on top side of an element to 0.5 using the mt-0.5 utilities.

  48. Control the background color of an element to gray-500/70 using the bg-gray-500/70 utilities.

  49. Use h-1.5 to set an element to a fixed height(1.5).

  50. Control the background color of an element to gradient-to-r using the bg-gradient-to-r utilities.

  51. Control the horizontal padding of an element to 0.5 using the px-0.5 utilities.

  52. Control the text color of an element to sm using the text-sm utilities.

  53. Control the padding on right side of an element to 0.25rem using the pr-1 utilities.

  54. Control the horizontal margin of an element to 1rem using the mx-4 utilities.

  55. Control the border color of an element to t using the border-t utilities.

  56. Control the border color of an element to gray-600/50 using the border-gray-600/50 utilities.

  57. Control the margin on top side of an element to 1.25rem using the mt-5 utilities.

  58. Control the padding on top side of an element to 0.25rem using the pt-1 utilities.

  59. Use h-8 to set an element to a fixed height(2rem).

  60. Use w-8 to set an element to a fixed width(2rem).

  61. Control the border color of an element to gray-600 using the border-gray-600 utilities.

  62. Control the horizontal margin of an element to 0.5rem using the mx-2 utilities.

  63. Control the text color of an element to xs using the text-xs utilities.

  64. Control the text color of an element to gray-300/90 using the text-gray-300/90 utilities.

  65. Control the text color of an element to center using the text-center utilities.

  66. Control the vertical margin of an element to 1rem using the my-4 utilities.

  67. Control the text color of an element to blue-600 using the text-blue-600 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to build a Tailwind Spotify Player components, learn and follow along to implement your own components.