Spotify playlist custom box code - Tailwind

	<!-- this div contains the overall text color - change "text-white" to another class color name to change all text on the page -->
<div class=" -mb-3 pb-3 text-white">
	<!-- this div is a gradient background; you can replace it with any other rgb value + a decimal reperesenting how transparent it should be (i.e. change the 1 to .50 for %50 opacity) - Mind the parenthesis, commas and quotes!-->
    <div class="grid grid-cols-4 gap-4 w-full p-3" style="background-image: linear-gradient(rgba(219, 39, 119,1), rgba(17, 24, 39, 1));">
		<!-- album/art image here -->
        <img class="col-span-2 col-start-2 md:col-span-1 md:col-start-1" src="IMAGE_LINK">

	<div class="col-span-4 md:col-span-3 pt-0">
            <div class="py-3 ">
            <h6>Playlist</h6> <!--indicate what type of music collection (album, playlist, soundtrack) -->
            <div class="text-xl font-bold md:text-4xl">Playlist/album/soundtrack name</div>
            <p class=" ">Optional description of the list. I'd recommend keeping it under 3 lines.</p>
            <p class=" text-xs pt-1">by yourname/artist • code <a class="hover:text-pink-500" href="https://buzzly.art/~OneAlbatross" rel="nofollow"><i class="fas fa-code fa-xs"></i></a> • 00 songs • 0 hrs 00 min</p>

            <div class="px-3 pt-3 pb-2 flex">
    			 <!-- This is the big green button (I'd link it to the playlist)-->
              <a href="LINK_FOR_BIG GREEN_BUTTON" rel="nofollow"><div class=" rounded-full py-2 px-3 mr-3" style="height: 35px; width: 35px; background-color: rgb(25, 205, 91)"><i class="fas fa-play fa-1x" style="color: rgb(250, 250, 250)"></i></div></a>

                <!-- This is the three horizontal dots button (can be linked to your Spotify profile) -->
               <a href="LINK_FOR_DOTS_BUTTON" rel="nofollow"><i class="fal fa-ellipsis-h fa-2x pl-2 pt-1 hover:text-white"></i></a>
            </div>

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

  <!-- this background shows behind the songs; make this rgba value the same as the bottom gradient rgba color to match -->
  <!-- you can make this background transparent by taking the 1 in the rgba(17,24,39, 1) and making it 0 -->
    <div class=" px-3 pb-2 grid-rows-auto" style="background-color: rgba(17, 24, 39, 1);">

    <!-- This is meant to say "title" and "artist" and is NOT set up for music; can be removed this div if you don't want it-->
    <div class="hidden md:block px-3 pt-3 pb-2 md:flex md:justify-between ">
     <p class="font-light tracking-widest text-sm pr-3"> •  Title</p><p class="font-light tracking-widest text-sm ">Artist</p>
    </div>

    <div class="hidden md:block bg-white mt-1 mb-4 w-full bg-opacity-10" style="height: 1.5px"></div>


    <!-- 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 -->
       <!-- copy and paste as many song sections in as you like-->
    	<!-- @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 -->

    <!-- FIRST SONG-->
    <iframe class="ml-2 -mb-6 opacity-5" style="width: 20px; height: 20px" src="https://www.youtube.com/embed/"></iframe>
    <div class="px-3 md:flex md:justify-between mb-4">
     <h4><i class="fas fa-play fa-xs pr-3"></i></a>Song Name</h4><p class="md:text-right">Artist</p>
    </div>

    <!-- SECOND SONG-->
    <iframe class="ml-2 -mb-6 opacity-5" style="width: 20px; height: 20px" src="https://www.youtube.com/embed/"></iframe>
    <div class="px-3 md:flex md:justify-between mb-4">
     <h4><i class="fas fa-play fa-xs pr-3"></i></a>Song Name</h4><p class="md:text-right">Artist</p>
    </div>

     <!-- THIRD SONG-->
        <iframe class="ml-2 -mb-6 opacity-5" style="width: 20px; height: 20px" src="https://www.youtube.com/embed/"></iframe>
    <div class="px-3 md:flex md:justify-between mb-4">
     <h4> <i class="fas fa-play fa-xs pr-3"></i>Song Name</h4><p class="md:text-right">Artist</p>
    </div>

	<!-- FOURTH SONG-->
    <iframe class="ml-2 -mb-6 opacity-5" style="width: 20px; height: 20px" src="https://www.youtube.com/embed/"></iframe>
    <div class="px-3 md:flex md:justify-between mb-4">
     <h4> <i class="fas fa-play fa-xs pr-3"></i>Song Name</h4> <p class="md:text-right">Artist</p>
    </div>

    <!-- FIFTH SONG-->
    <iframe class="ml-2 -mb-6 opacity-5" style="width: 20px; height: 20px" src="https://www.youtube.com/embed/"></iframe>
    <div class="px-3 md:flex md:justify-between mb-4">
     <h4> <i class="fas fa-play fa-xs pr-3"></i>Song Name</h4> <p class="md:text-right">Artist</p>
    </div>


</div>

</div>