Mobile Music Library Screen UI with Tailwind

<div class="relative screen-3">
        <div class="w-[393px] h-[850px] bg-stone-200 border-gray-800 border-8 rounded-[55px] pt-0 pr-0 pb-0 pl-0 shadow-2xl">
          <!-- Screen -->
          <div class="w-full h-full overflow-hidden relative bg-gray-950 rounded-[47px]">
            
            <!-- Status Bar -->
            <div class="flex justify-between items-center px-8 pt-4 pb-2">
              <div class="text-white text-sm font-medium font-sans" style="">9:41</div>
              <div class="flex items-center gap-1">
                <div class="w-4 h-2.5 border border-white rounded-sm">
                  <div class="w-3 h-1.5 bg-white rounded-sm m-0.5"></div>
                </div>
              </div>
            </div>

            <!-- Header -->
            <div class="pr-6 pb-6 pl-6">
              <h1 class="text-white tracking-tight font-sans font-semibold text-3xl" style="">Library</h1>
            </div>

            <!-- Profile Section -->
            <div class="px-6 pb-6">
              <div class="flex gap-4 hover:bg-gray-800/30 transition-colors bg-gray-900 border-gray-800 border rounded-xl pt-3 pr-3 pb-3 pl-3 items-center">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c8d60905-2827-47ce-8aff-3b8cd7aab332_800w.jpg" class="w-16 h-16 rounded-full object-cover" alt="Profile">
                <div class="flex-1">
                  <p class="text-sm text-gray-400 font-sans">Made for</p>
                  <h3 class="font-semibold text-white font-sans text-lg" style="">Alex Johnson</h3>
                </div>
                <button class="w-8 h-8 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right w-5 h-5 text-gray-400"><path d="m9 18 6-6-6-6" class=""></path></svg>
                </button>
              </div>
            </div>

            <!-- Recent Playlists -->
            <div class="px-6 pb-4">
              <h2 class="font-semibold text-white mb-4 font-sans text-lg" style="">Recently Played</h2>
              <div class="space-y-3">
                
                <div class="flex gap-4 hover:bg-gray-800/30 transition-colors bg-gray-900 border-gray-800 border rounded-xl pt-3 pr-3 pb-3 pl-3 items-center">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7de1229a-6a54-423d-a41c-2377d871bf2c_320w.jpg" class="w-16 h-16 rounded-lg object-cover shadow-md" alt="Album">
                  <div class="flex-1 min-w-0">
                    <h3 class="font-medium text-white truncate font-sans" style="">Blinding Lights</h3>
                    <p class="text-gray-400 text-sm truncate font-sans">The Weeknd</p>
                  </div>
                  <button class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal w-5 h-5 text-gray-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                  </button>
                </div>

                <div class="flex gap-4 hover:bg-gray-800/30 transition-colors bg-gray-900 border-gray-800 border rounded-xl pt-3 pr-3 pb-3 pl-3 items-center">
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e5d13cbd-9663-4da1-8220-0f2fb49629b3_320w.jpg" class="w-16 h-16 rounded-lg object-cover shadow-md" alt="Album" style="">
                  <div class="flex-1 min-w-0">
                    <h3 class="font-medium text-white truncate font-sans" style="">Watermelon Sugar</h3>
                    <p class="text-gray-400 text-sm truncate font-sans">Harry Styles</p>
                  </div>
                  <button class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal w-5 h-5 text-gray-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                  </button>
                </div>

                <div class="flex gap-4 hover:bg-gray-800/30 transition-colors bg-gray-900 border-gray-800 border rounded-xl pt-3 pr-3 pb-3 pl-3 items-center">
                  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/72c0a942-8db1-4109-b875-9ccb3cee3299_320w.jpg" class="w-16 h-16 rounded-lg object-cover shadow-md" alt="Album">
                  <div class="flex-1 min-w-0">
                    <h3 class="font-medium text-white truncate font-sans" style="">Good 4 U</h3>
                    <p class="text-gray-400 text-sm truncate font-sans">Olivia Rodrigo</p>
                  </div>
                  <button class="p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="more-horizontal" class="lucide lucide-more-horizontal w-5 h-5 text-gray-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
                  </button>
                </div>
              </div>
            </div>

            <!-- Categories -->
            <div class="px-6 pb-4">
              <h2 class="font-semibold text-white mb-4 font-sans text-lg" style="">Browse</h2>
              <div class="grid grid-cols-2 gap-3">
                <div class="p-4 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl shadow-lg relative overflow-hidden">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Pop</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7fbd33e3-7644-474d-9783-ca4073377832_320w.jpg" class="w-16 h-16 rounded-lg object-cover mt-2 ml-auto -mb-2 -mr-2 rotate-12 shadow-lg" alt="">
                </div>
                <div class="p-4 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl shadow-lg relative overflow-hidden">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Rock</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8bd3929e-2b2a-4025-a259-58ef052b1b9c_320w.jpg" class="w-16 h-16 rounded-lg object-cover mt-2 ml-auto -mb-2 -mr-2 rotate-12 shadow-lg" alt="">
                </div>
              </div>
            </div>

            <!-- Mini Player -->
            <div class="absolute bottom-20 left-0 right-0 bg-gray-800/70 border-gray-700/50 border-0 rounded-none mr-0 ml-0 pt-4 pr-4 pb-4 pl-4 shadow-xl backdrop-blur-xl">
              <div class="flex items-center gap-3">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d19406ed-03b0-48e8-bc43-3f58add41c8b_320w.jpg" class="w-12 h-12 rounded-lg object-cover shadow-md" alt="">
                <div class="flex-1 min-w-0">
                  <p class="font-medium text-white truncate text-sm font-sans" style="">Blinding Lights</p>
                  <p class="text-gray-400 text-xs truncate font-sans">The Weeknd</p>
                </div>
                <button class="bg-white/10 rounded-full pt-2 pr-2 pb-2 pl-2 backdrop-blur-sm">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="pause" class="lucide lucide-pause w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><rect x="14" y="3" width="5" height="18" rx="1" class=""></rect><rect x="5" y="3" width="5" height="18" rx="1" class=""></rect></svg>
</button>
              </div>
            </div>

            <!-- Tab Bar -->
            <div class="absolute bottom-0 left-0 right-0 bg-gray-900/90 border-gray-800 border-t backdrop-blur-xl">
  <div class="flex pt-2 pr-6 pb-6 pl-6 items-center justify-around">
    <button class="flex flex-col items-center gap-1 p-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-6 h-6 text-gray-500"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
      
    </button>
    
    <button class="flex flex-col items-center gap-1 p-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search w-6 h-6 text-gray-500"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
      
    </button>
    
    <div class="flex flex-col items-center gap-1" style="--radius: 20px; --bg: #2c3238; position: relative;">
      <div class="wrap" style="display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; width: 50px; height: 50px;">
        <div style="content: ''; position: absolute; width: 150px; height: 2000px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.05); filter: blur(40px); transform: skewY(-20deg); pointer-events: none; z-index: 1;"></div>
        <div style="content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.5); filter: blur(20px); z-index: 2;"></div>
        <div class="button" style="position: relative; overflow: hidden; width: 44px; height: 44px; background-color: var(--bg); z-index: 10; border: transparent; border-radius: var(--radius); box-shadow: inset 0 1px 1px rgb(255 255 255 / 40%), inset 0 -6px 1px -4px #0084ff, inset 0 -15px 6px -8px #003cff; transition: all 0.3s ease;">
          <div style="content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) * 0.8); border-top: 12px solid #414244; border-left: 10px solid #2b2b2c; border-right: 10px solid #2b2b2c; border-bottom: 12px solid #15161a; filter: blur(4px); transition: all 0.5s ease; z-index: 1;"></div>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="library" class="lucide lucide-library" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #3c69ff; z-index: 20; filter: drop-shadow(0 0 8px #0231ce);"><path d="m16 6 4 14" class=""></path><path d="M12 6v14" class=""></path><path d="M8 8v12" class=""></path><path d="M4 4v16" class=""></path></svg>
        </div>
        <div class="bg" style="background-color: black; position: absolute; inset: -4px; border-radius: calc(var(--radius) * 1.25); box-shadow: 0 15px 8px -8px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; overflow: hidden; z-index: 3;">
          <div style="content: ''; position: absolute; border-radius: inherit; box-shadow: inset 0 -2px 0px -1px rgb(120 176 255 / 32%), inset 0 0 3px 1px black, inset 0 0 0 1px black; inset: 0; z-index: 1;"></div>
          <div class="shine-1" style="content: ''; position: absolute; z-index: 0; transition: all 0.3s ease; background: rgba(0, 60, 255, 1); width: 6px; height: 6px; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; filter: blur(1px); transform: translateY(0) scale(0);"></div>
        </div>
        <div class="led" style="position: absolute; z-index: 25; top: 100%; border-radius: 50%; width: 4px; height: 4px; margin-top: 8px; transition: all 0.3s ease; background-color: #3aeaf3; box-shadow: 0 -6px 20px 10px #003cff, inset 0 1px 1px 0px rgba(255, 255, 255, 0.6), 0 0 0px 2px rgb(0 0 0 / 60%), 0 0 1px 2px rgb(0 79 152 / 80%);"></div>
      </div>
      
    </div>
  </div>
</div>

            <!-- Home Indicator -->
            <div class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/30 rounded-full"></div>
          </div>
        </div>
      </div>