Music Streaming App HTML Template with Tailwind

1,295 Metehan

<!DOCTYPE html>
<html lang="tr">
<head><script src="https://static.readdy.ai/static/e.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SoundWave - Modern Müzik Akışı Platformu</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <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=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <style>
        :where([class^="ri-"])::before {
            content: "\f3c2";
        }
        .sidebar-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb {
            background: rgba(156, 163, 175, 0.3);
            border-radius: 3px;
        }
        .sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(156, 163, 175, 0.5);
        }
        .waveform {
            background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
            height: 2px;
            border-radius: 1px;
        }
        .progress-bar {
            background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
        }
        .custom-checkbox {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            position: relative;
        }
        .custom-checkbox:checked {
            background: #6366f1;
            border-color: #6366f1;
        }
        .custom-checkbox:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        .custom-switch {
            width: 44px;
            height: 24px;
            background: #d1d5db;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .custom-switch.active {
            background: #6366f1;
        }
        .custom-switch::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .custom-switch.active::after {
            left: 22px;
        }
        .custom-range {
            appearance: none;
            width: 100%;
            height: 4px;
            background: #e5e7eb;
            border-radius: 2px;
            outline: none;
        }
        .custom-range::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            background: #6366f1;
            border-radius: 50%;
            cursor: pointer;
        }
        .custom-range::-moz-range-thumb {
            width: 16px;
            height: 16px;
            background: #6366f1;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 font-sans">
    
    <nav class="bg-white border-b border-gray-200 px-6 py-4 fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-8">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                        <i class="ri-music-2-line text-white text-lg"></i>
                    </div>
                    <span class="text-xl font-['Pacifico'] text-primary">SoundWave</span>
                </div>
                <div class="relative">
                    <div class="w-12 h-12 flex items-center justify-center">
                        <i class="ri-search-line text-gray-400 text-xl absolute left-4"></i>
                    </div>
                    <input type="text" placeholder="Sanatçı, şarkı veya podcast ara..." 
                           class="pl-12 pr-4 py-3 w-96 bg-gray-100 rounded-full border-none text-sm focus:outline-none focus:ring-2 focus:ring-primary/20">
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-notification-line text-gray-600 text-xl"></i>
                </button>
                <div class="custom-switch" id="themeSwitch">
                </div>
                <div class="flex items-center space-x-3">
                    <img src="https://readdy.ai/api/search-image?query=Professional%20young%20person%20avatar%20portrait%20with%20modern%20casual%20style%2C%20clean%20background%2C%20friendly%20expression%2C%20high%20quality%20headshot&width=40&height=40&seq=user1&orientation=squarish" 
                         alt="Profil" class="w-10 h-10 rounded-full object-cover">
                    <div class="flex items-center space-x-1">
                        <span class="text-sm font-medium">Ahmet Yılmaz</span>
                        <div class="w-4 h-4 flex items-center justify-center">
                            <i class="ri-arrow-down-s-line text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

<div class="flex pt-20">
        
        <aside class="w-64 bg-white border-r border-gray-200 fixed left-0 top-20 bottom-24 overflow-y-auto sidebar-scroll">
            <div class="p-6 space-y-6">
                
                <div class="space-y-2">
                    <div class="flex items-center space-x-3 px-3 py-2 rounded-lg bg-primary/10 text-primary">
                        <div class="w-5 h-5 flex items-center justify-center">
                            <i class="ri-home-5-line"></i>
                        </div>
                        <span class="font-medium">Ana Sayfa</span>
                    </div>
                    <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                        <div class="w-5 h-5 flex items-center justify-center">
                            <i class="ri-compass-3-line text-gray-600"></i>
                        </div>
                        <span class="text-gray-700">Keşfet</span>
                    </div>
                    <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                        <div class="w-5 h-5 flex items-center justify-center">
                            <i class="ri-radio-line text-gray-600"></i>
                        </div>
                        <span class="text-gray-700">Radyo</span>
                    </div>
                </div>

<div class="space-y-3">
                    <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Kütüphanem</h3>
                    <div class="space-y-1">
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <div class="w-5 h-5 flex items-center justify-center">
                                <i class="ri-heart-line text-gray-600"></i>
                            </div>
                            <span class="text-gray-700">Beğendiklerim</span>
                        </div>
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <div class="w-5 h-5 flex items-center justify-center">
                                <i class="ri-download-line text-gray-600"></i>
                            </div>
                            <span class="text-gray-700">İndirilenler</span>
                        </div>
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <div class="w-5 h-5 flex items-center justify-center">
                                <i class="ri-history-line text-gray-600"></i>
                            </div>
                            <span class="text-gray-700">Son Çalınanlar</span>
                        </div>
                    </div>
                </div>

<div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Çalma Listelerim</h3>
                        <button class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 !rounded-button whitespace-nowrap">
                            <i class="ri-add-line text-gray-600"></i>
                        </button>
                    </div>
                    <div class="space-y-1">
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <img src="https://readdy.ai/api/search-image?query=Modern%20music%20playlist%20cover%20art%20with%20geometric%20patterns%2C%20vibrant%20colors%2C%20abstract%20design%2C%20digital%20art%20style&width=32&height=32&seq=playlist1&orientation=squarish" 
                                 alt="Çalma Listesi" class="w-8 h-8 rounded object-cover">
                            <span class="text-gray-700 text-sm">Favori Parçalarım</span>
                        </div>
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <img src="https://readdy.ai/api/search-image?query=Workout%20music%20playlist%20cover%20with%20energetic%20design%2C%20bold%20typography%2C%20fitness%20theme%2C%20modern%20gradient%20background&width=32&height=32&seq=playlist2&orientation=squarish" 
                                 alt="Çalma Listesi" class="w-8 h-8 rounded object-cover">
                            <span class="text-gray-700 text-sm">Antrenman Müzikleri</span>
                        </div>
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <img src="https://readdy.ai/api/search-image?query=Chill%20music%20playlist%20cover%20with%20relaxing%20atmosphere%2C%20soft%20colors%2C%20minimalist%20design%2C%20peaceful%20mood&width=32&height=32&seq=playlist3&orientation=squarish" 
                                 alt="Çalma Listesi" class="w-8 h-8 rounded object-cover">
                            <span class="text-gray-700 text-sm">Rahatlatıcı Müzikler</span>
                        </div>
                        <div class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer">
                            <img src="https://readdy.ai/api/search-image?query=Road%20trip%20music%20playlist%20cover%20with%20adventure%20theme%2C%20car%20journey%20vibes%2C%20sunset%20colors%2C%20travel%20inspiration&width=32&height=32&seq=playlist4&orientation=squarish" 
                                 alt="Çalma Listesi" class="w-8 h-8 rounded object-cover">
                            <span class="text-gray-700 text-sm">Yol Şarkıları</span>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

<main class="flex-1 ml-64 pb-24 px-8 py-6">
            
            <section class="mb-8 h-80 rounded-2xl overflow-hidden relative" 
                     style="background-image: url('https://readdy.ai/api/search-image?query=Modern%20music%20streaming%20hero%20background%20with%20abstract%20sound%20waves%2C%20gradient%20colors%20from%20purple%20to%20blue%2C%20left%20side%20darker%20for%20text%20overlay%2C%20right%20side%20brighter%20with%20musical%20elements%2C%20professional%20design&width=1200&height=320&seq=hero1&orientation=landscape');">
                <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div>
                <div class="relative h-full flex items-center px-12">
                    <div class="text-white max-w-lg">
                        <h1 class="text-5xl font-bold mb-4">Müziğin Gücünü Keşfet</h1>
                        <p class="text-xl mb-6 text-gray-200">Milyonlarca şarkı, podcast ve radyo kanalı. Her anınız için mükemmel müzik.</p>
                        <button class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-full font-semibold transition-colors !rounded-button whitespace-nowrap">
                            Ücretsiz Başla
                        </button>
                    </div>
                </div>
            </section>

<section class="mb-8">
                <div class="grid grid-cols-6 gap-4">
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Liked%20songs%20playlist%20icon%20with%20heart%20symbol%2C%20warm%20pink%20gradient%20background%2C%20modern%20minimalist%20design&width=48&height=48&seq=liked1&orientation=squarish" 
                                 alt="Beğendiklerim" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">Beğendiklerim</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Recently%20played%20music%20icon%20with%20clock%20symbol%2C%20blue%20gradient%20background%2C%20modern%20digital%20design&width=48&height=48&seq=recent1&orientation=squarish" 
                                 alt="Son Çalınanlar" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">Son Çalınanlar</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Downloaded%20music%20icon%20with%20download%20arrow%2C%20green%20gradient%20background%2C%20offline%20music%20theme&width=48&height=48&seq=download1&orientation=squarish" 
                                 alt="İndirilenler" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">İndirilenler</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Discover%20music%20icon%20with%20compass%20symbol%2C%20purple%20gradient%20background%2C%20exploration%20theme&width=48&height=48&seq=discover1&orientation=squarish" 
                                 alt="Keşfet" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">Keşfet</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Radio%20station%20icon%20with%20radio%20waves%2C%20orange%20gradient%20background%2C%20broadcasting%20theme&width=48&height=48&seq=radio1&orientation=squarish" 
                                 alt="Radyo" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">Radyo</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-4 hover:bg-gray-50 cursor-pointer transition-colors border border-gray-100">
                        <div class="flex items-center space-x-3">
                            <img src="https://readdy.ai/api/search-image?query=Podcast%20icon%20with%20microphone%20symbol%2C%20teal%20gradient%20background%2C%20audio%20content%20theme&width=48&height=48&seq=podcast1&orientation=squarish" 
                                 alt="Podcast" class="w-12 h-12 rounded object-cover">
                            <span class="font-medium text-gray-900">Podcast</span>
                        </div>
                    </div>
                </div>
            </section>

<section class="mb-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">Sizin İçin Öneriler</h2>
                    <button class="text-primary hover:text-primary/80 font-medium !rounded-button whitespace-nowrap">
                        Tümünü Gör
                    </button>
                </div>
                <div class="grid grid-cols-5 gap-6">
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Modern%20pop%20album%20cover%20with%20vibrant%20colors%2C%20young%20artist%20portrait%2C%20contemporary%20music%20style%2C%20professional%20photography&width=200&height=200&seq=album1&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Günün Hits'leri</h3>
                        <p class="text-sm text-gray-600 truncate">En popüler şarkılar</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Electronic%20music%20album%20cover%20with%20neon%20lights%2C%20futuristic%20design%2C%20DJ%20theme%2C%20dark%20background%20with%20glowing%20elements&width=200&height=200&seq=album2&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Elektronik Vibes</h3>
                        <p class="text-sm text-gray-600 truncate">Dance ve elektronik müzik</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Indie%20rock%20album%20cover%20with%20vintage%20aesthetic%2C%20guitar%20silhouette%2C%20warm%20earth%20tones%2C%20artistic%20photography&width=200&height=200&seq=album3&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Indie Keşifleri</h3>
                        <p class="text-sm text-gray-600 truncate">Bağımsız sanatçılar</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Jazz%20music%20album%20cover%20with%20saxophone%20instrument%2C%20elegant%20black%20and%20gold%20design%2C%20sophisticated%20atmosphere&width=200&height=200&seq=album4&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Jazz Klasikleri</h3>
                        <p class="text-sm text-gray-600 truncate">Zamansız jazz parçaları</p>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Acoustic%20music%20album%20cover%20with%20wooden%20guitar%2C%20warm%20lighting%2C%20cozy%20atmosphere%2C%20folk%20music%20theme&width=200&height=200&seq=album5&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Akustik Sessizlik</h3>
                        <p class="text-sm text-gray-600 truncate">Sakin akustik parçalar</p>
                    </div>
                </div>
            </section>

<section class="mb-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">Son Çalınanlar</h2>
                    <button class="text-primary hover:text-primary/80 font-medium !rounded-button whitespace-nowrap">
                        Tümünü Gör
                    </button>
                </div>
                <div class="grid grid-cols-4 gap-6">
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Turkish%20pop%20music%20album%20cover%20with%20modern%20design%2C%20colorful%20artwork%2C%20contemporary%20Turkish%20artist%20theme&width=200&height=200&seq=turkish1&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Türkçe Pop Hits</h3>
                        <p class="text-sm text-gray-600 truncate">Çeşitli Sanatçılar</p>
                        <div class="flex items-center mt-2">
                            <div class="w-4 h-4 flex items-center justify-center">
                                <i class="ri-play-circle-line text-primary"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">2 saat önce</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Rock%20music%20album%20cover%20with%20electric%20guitar%2C%20dark%20moody%20lighting%2C%20metal%20and%20rock%20theme%2C%20powerful%20design&width=200&height=200&seq=rock1&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Rock Efsaneleri</h3>
                        <p class="text-sm text-gray-600 truncate">Klasik rock koleksiyonu</p>
                        <div class="flex items-center mt-2">
                            <div class="w-4 h-4 flex items-center justify-center">
                                <i class="ri-play-circle-line text-primary"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">5 saat önce</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Chill%20music%20album%20cover%20with%20peaceful%20nature%20scene%2C%20soft%20pastel%20colors%2C%20relaxing%20atmosphere%2C%20meditation%20theme&width=200&height=200&seq=chill1&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Chill Vibes</h3>
                        <p class="text-sm text-gray-600 truncate">Rahatlatıcı melodiler</p>
                        <div class="flex items-center mt-2">
                            <div class="w-4 h-4 flex items-center justify-center">
                                <i class="ri-play-circle-line text-primary"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">1 gün önce</span>
                        </div>
                    </div>
                    <div class="bg-white rounded-xl p-4 hover:shadow-lg transition-shadow cursor-pointer border border-gray-100">
                        <img src="https://readdy.ai/api/search-image?query=Hip%20hop%20music%20album%20cover%20with%20urban%20street%20art%2C%20graffiti%20style%2C%20modern%20rap%20theme%2C%20bold%20typography&width=200&height=200&seq=hiphop1&orientation=squarish" 
                             alt="Albüm" class="w-full aspect-square rounded-lg object-cover mb-4">
                        <h3 class="font-semibold text-gray-900 mb-1 truncate">Hip-Hop Beats</h3>
                        <p class="text-sm text-gray-600 truncate">En yeni rap parçaları</p>
                        <div class="flex items-center mt-2">
                            <div class="w-4 h-4 flex items-center justify-center">
                                <i class="ri-play-circle-line text-primary"></i>
                            </div>
                            <span class="text-xs text-gray-500 ml-1">2 gün önce</span>
                        </div>
                    </div>
                </div>
            </section>

<section>
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-gray-900">Trend Sanatçılar</h2>
                    <button class="text-primary hover:text-primary/80 font-medium !rounded-button whitespace-nowrap">
                        Tümünü Gör
                    </button>
                </div>
                <div class="grid grid-cols-6 gap-4">
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Professional%20music%20artist%20portrait%2C%20young%20talented%20musician%2C%20modern%20style%2C%20studio%20photography%2C%20confident%20expression&width=120&height=120&seq=artist1&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Sezen Aksu</h3>
                        <p class="text-sm text-gray-600">Türk Pop</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Contemporary%20music%20artist%20portrait%2C%20creative%20performer%2C%20artistic%20lighting%2C%20modern%20musician%20style&width=120&height=120&seq=artist2&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Tarkan</h3>
                        <p class="text-sm text-gray-600">Pop</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Rock%20musician%20portrait%2C%20electric%20guitar%20player%2C%20edgy%20style%2C%20concert%20lighting%2C%20powerful%20presence&width=120&height=120&seq=artist3&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Barış Manço</h3>
                        <p class="text-sm text-gray-600">Rock</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Electronic%20music%20producer%20portrait%2C%20DJ%20with%20headphones%2C%20modern%20studio%20setup%2C%20creative%20lighting&width=120&height=120&seq=artist4&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Kenan Doğulu</h3>
                        <p class="text-sm text-gray-600">Pop/R&B</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Folk%20musician%20portrait%2C%20acoustic%20guitar%20artist%2C%20warm%20natural%20lighting%2C%20traditional%20meets%20modern%20style&width=120&height=120&seq=artist5&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Cem Adrian</h3>
                        <p class="text-sm text-gray-600">Alternative</p>
                    </div>
                    <div class="text-center group cursor-pointer">
                        <img src="https://readdy.ai/api/search-image?query=Jazz%20vocalist%20portrait%2C%20elegant%20performer%2C%20sophisticated%20style%2C%20stage%20lighting%2C%20artistic%20composition&width=120&height=120&seq=artist6&orientation=squarish" 
                             alt="Sanatçı" class="w-full aspect-square rounded-full object-cover mb-3 group-hover:shadow-lg transition-shadow">
                        <h3 class="font-medium text-gray-900 truncate">Sıla</h3>
                        <p class="text-sm text-gray-600">Pop/Jazz</p>
                    </div>
                </div>
            </section>
        </main>
    </div>

<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-6 py-4 z-50">
        <div class="flex items-center justify-between">
            
            <div class="flex items-center space-x-4 flex-1">
                <img src="https://readdy.ai/api/search-image?query=Current%20playing%20song%20album%20cover%2C%20modern%20music%20artwork%2C%20colorful%20design%2C%20square%20format&width=56&height=56&seq=current1&orientation=squarish" 
                     alt="Şu an çalan" class="w-14 h-14 rounded object-cover">
                <div class="min-w-0">
                    <h4 class="font-medium text-gray-900 truncate">Yalnızlık Senfonisi</h4>
                    <p class="text-sm text-gray-600 truncate">Sezen Aksu</p>
                </div>
                <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-heart-line text-gray-600"></i>
                </button>
            </div>

<div class="flex flex-col items-center flex-2 max-w-md mx-8">
                <div class="flex items-center space-x-4 mb-2">
                    <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                        <i class="ri-shuffle-line text-gray-600"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                        <i class="ri-skip-back-line text-gray-600"></i>
                    </button>
                    <button class="w-12 h-12 bg-primary hover:bg-primary/90 rounded-full flex items-center justify-center !rounded-button whitespace-nowrap">
                        <i class="ri-pause-line text-white text-xl"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                        <i class="ri-skip-forward-line text-gray-600"></i>
                    </button>
                    <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                        <i class="ri-repeat-line text-gray-600"></i>
                    </button>
                </div>
                <div class="flex items-center space-x-3 w-full">
                    <span class="text-xs text-gray-500 w-10 text-right">2:34</span>
                    <div class="flex-1 relative">
                        <div class="h-1 bg-gray-200 rounded-full">
                            <div class="h-1 bg-primary rounded-full" style="width: 35%"></div>
                        </div>
                        <div class="absolute top-0 left-0 w-full h-1">
                            <div class="waveform opacity-20" style="width: 100%"></div>
                        </div>
                    </div>
                    <span class="text-xs text-gray-500 w-10">4:12</span>
                </div>
            </div>

<div class="flex items-center space-x-3 flex-1 justify-end">
                <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-mic-line text-gray-600"></i>
                </button>
                <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-playlist-line text-gray-600"></i>
                </button>
                <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-computer-line text-gray-600"></i>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-4 h-4 flex items-center justify-center">
                        <i class="ri-volume-down-line text-gray-600 text-sm"></i>
                    </div>
                    <input type="range" min="0" max="100" value="75" class="custom-range w-20">
                </div>
                <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 !rounded-button whitespace-nowrap">
                    <i class="ri-fullscreen-line text-gray-600"></i>
                </button>
            </div>
        </div>
    </div>

CSS

Music Streaming App HTML Template with Tailwind

Recommended