Neumorphism Audio Player
A Neumorphism-styled audio player component with play, pause, skip, and volume controls, designed for business websites. Features a progress bar, song title, artist, and album art. Includes responsive design and dark mode support using Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
<div class="flex flex-col items-center">
<div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
<img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
</div>
<div class="w-full mt-6">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
</div>
</div>
<div class="flex items-center justify-around mt-8">
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="flex items-center mt-6">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
</svg>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
</div>
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
<path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<style>
.shadow-xl-dark {
box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
}
.shadow-inner-dark {
box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic {
box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic-lg {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.shadow-neumorphic-lg-dark {
box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
}
</style>Related Components
Audio Player Component
A responsive audio player component designed with Glassmorphism style, featuring a frosted glass-like look and support for dark mode.
Skeuomorphic Audio Player
An audio player component designed with a Skeuomorphic style, pastel color scheme, and complex interface. It supports dark mode and is responsive, suitable for e-commerce sites.
Audio Player Component
A responsive audio player component designed in dark mode using Tailwind CSS. It supports dark theme and provides a clean interface for audio playback.