Mobile Music Search Screen with Genre Grid

<div class="relative screen-1">
        <div class="w-[393px] h-[850px] bg-black 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>

            <!-- Search Header -->
            <div class="pr-6 pb-6 pl-6">
              <h1 class="text-white tracking-tight mb-4 font-sans font-semibold text-3xl" style="">Search</h1>
              
              <!-- Search Bar -->
              <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <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-5 h-5 text-gray-400"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
                </div>
                <input type="text" placeholder="Artists, songs, or playlists" class="w-full placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-white bg-gray-900/80 border-gray-800 border rounded-xl pt-3 pr-4 pb-3 pl-12">
              </div>
            </div>

            <!-- Browse All -->
            <div class="px-6 pb-4">
              <h2 class="font-semibold text-white mb-4 font-sans text-lg" style="">Browse All</h2>
              <div class="grid grid-cols-2 gap-3 max-h-96 overflow-y-auto">
                
                <div class="p-4 bg-gradient-to-br from-pink-500 to-rose-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Pop</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cd1e23ec-0f27-4bd7-94aa-ec4a5e45ff55_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>
                
                <div class="p-4 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <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/8830c989-0aa7-4a9b-a1fc-a81e75ddc91c_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>

                <div class="p-4 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Hip-Hop</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0decebec-86b8-4a0b-8eae-9d59fc2cb6c0_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>

                <div class="p-4 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Electronic</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0c3dbf33-c7e3-4e8b-98c2-2fa9aa8446c3_320w.jpg" class="w-16 h-16 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="">
                </div>

                <div class="p-4 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Jazz</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7dc1deaa-731d-47ce-a397-6b102ac413ee_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>

                <div class="p-4 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Country</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/68126ad8-98eb-4b55-bf1c-e7e1c245f0b1_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>

                <div class="p-4 bg-gradient-to-br from-teal-500 to-cyan-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">R&amp;B</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e3feb627-3752-46af-9eea-dab3b32a4b2b_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="" style="">
                </div>

                <div class="p-4 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-lg relative overflow-hidden min-h-[100px]">
                  <h3 class="text-white font-medium text-lg font-sans" style="">Classical</h3>
                  <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/8da92894-10a2-4653-8a1e-6560bde45a33_320w.jpg" class="w-14 h-14 rounded-lg object-cover absolute bottom-2 right-2 rotate-12 shadow-lg" alt="">
                </div>
              </div>
            </div>

            <!-- Recent Searches -->
            <div class="px-6 pb-4">
              <h2 class="font-semibold text-white mb-4 font-sans text-lg" style="">Recent searches</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">
                  <div class="w-12 h-12 bg-gray-700 rounded-lg 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="clock" class="lucide lucide-clock w-[20px] h-[20px]" style="width: 20px; height: 20px; color: rgb(156, 163, 175);"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  </div>
                  <div class="flex-1">
                    <h3 class="font-medium text-white font-sans" style="">taylor swift</h3>
                  </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="x" class="lucide lucide-x w-4 h-4 text-gray-400"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
                  </button>
                </div>

                <div class="flex items-center gap-4 p-3 rounded-xl hover:bg-gray-800/30 transition-colors">
                  <div class="w-12 h-12 bg-gray-700 rounded-lg 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="clock" class="lucide lucide-clock w-5 h-5 text-gray-400"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  </div>
                  <div class="flex-1">
                    <h3 class="font-medium text-white font-sans" style="">chill playlist</h3>
                  </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="x" class="lucide lucide-x w-4 h-4 text-gray-400"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
                  </button>
                </div>
              </div>
            </div>

            <!-- Tab Bar -->
            <div class="absolute bottom-0 left-0 right-0 bg-gray-900/50 border-gray-800 border-t backdrop-blur-xl">
              <div class="flex pt-2 pr-6 pb-8 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>
  
  <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;" class="">
  
</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="search" class="lucide lucide-search" 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="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></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;" class=""></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>
  
  <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="library" class="lucide lucide-library w-6 h-6 text-gray-500"><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>
    
  </button>
</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>