Modelo HTML para aplicativo de streaming de música com Tailwind

Abrir no Editor Publique Seu Código

Recomendado

28 March 2025

CodePen Home Cartões Móveis Esboçados

7 May 2025

<!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>

Modelo HTML para aplicativo de streaming de música com Tailwind

Recomendado

CodePen Home Cartões Móveis Esboçados

Um código do Developer7

Um Código de Farah

HTML

CSS

JS

Recomendado

CodePen Home Cartões Móveis Esboçados

Um código do Developer7

Um Código de Farah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS