Spotify Song Feature - Tailwind

<!-- BACKGROUND IMAGE controls are above this code box. It takes an image url. Because this box is so short I'd recomend trying a short and wide image and/or setting the SIZE to FILL to achieve better view of the background-->

<div class="-mb-3 text-pink-50">    <!-- change "text-pink-50" to another color to change all text color (see https://v2.tailwindcss.com/docs/text-color for text color names) -->
    <div class="flex flex-row w-full p-3 mb-3 items-end" style="background-image: linear-gradient(27deg, rgba(15,17,28,1), rgba(15,17,28,.8), rgba(255,111,0,0) )"> <!-- this is the gradient overlay that appears over the background image; check my blog https://buzzly.art/~OneAlbatross/blog/template-editing-instructions-and-code-help for how to edit gradient backgrounds -->

        <img src="https://www.freeiconspng.com/thumbs/no-image-icon/no-image-icon-6.png" style="height:144px"> <!-- IMAGE LINK goes between the quotes in src="". The height is adjustable - the width should stay proportional automatically-->

	<div class="pt-0 pb-3 pl-4">

            <div class="text-xl font-bold md:text-4xl pb-3">Song Name Here</div>

            <div class="flex flex-row">

                <div class="px-4 pt-1">

                       <iframe class="opacity-5 -mr-5 -mb-7" style="width: 25px; height: 25px" src="https://www.youtube.com/embed/"></iframe> <!-- THIS IS THE SONG LINK. Songs have to be from Youtube; click share button > the jumble of letter and number after the 'https://youtu.be/" is what you want to copy paste here, after the "/embed/"-->
    <!-- add "?start=#" to the end of the url and replace # with a number to have the music start at that number of seconds into the video; EXAMPLE: https://www.youtube.com/embed/PJ8IBPpzToc?start=40 -->
    	<!-- @Crowcities discovered that for some Firefox users, the buttons do not work unless they are set to be slighlty visible at "opacity-5". If you are using a theme that makes the iframe too obvious you can change it to opacity-0, BUT this may make your player inoperable for some users -->

                       <div class=" rounded-full py-2 px-3 pl-2 -mt-1 -ml-1" style="height: 35px; width: 35px; background-color: rgb(25, 205, 91)"><!-- you may change the green part of the play button to a different color by changing it to another rgba value here-->
                       <i class="fas fa-play fa-1x pl-1" style="color: rgb(250, 250, 250)"></i><!-- you can change the color of the arrow itself by changing this rgb value -->
                       </div>

                   </div>

                    <div class="flex-grow">
                        <p>by <a class="no-underline hover:text-pink-500" href="LINK_TO_ARTIST_HERE" rel="nofollow">Artist Name</a></p> <!-- this has an optional link to the musical artist. -->
                <p class=" text-xs pt-1">code <a class="hover:text-pink-500" href="https://buzzly.art/~OneAlbatross" rel="nofollow"><i class="fas fa-code fa-xs"></i></a> •  Single • 2019 • 3 : 23</p> <!-- please don't remove the code credit (the "code" and link to my profile), otherwise this is some optional info on the song, -->
                    </div>

                </div>
        </div>
    </div>
</div>
</div>