Neumorphic Back to Top 按钮（海洋蓝）
一个简单的 'Back to Top' 按钮组件，采用中构风格设计，使用海蓝色调，适用于音乐/音频平台。它是完全响应的，并支持深色模式。
HTML 代码
<div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
<!-- Component Wrapper -->
<a href="#top" class="
relative z-10
p-4 md:p-5
rounded-full
shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue
text-blue-600 dark:text-blue-300
hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed
active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
group
">
<svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
<!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg> -->
</a>
<!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
<style>
/* Light mode */
.shadow-neumorphic-light-blue {
box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
}
.shadow-neumorphic-light-blue-pressed {
box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
}
/* Dark mode */
.dark .shadow-neumorphic-dark-blue {
box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
}
.dark .shadow-neumorphic-dark-blue-pressed {
box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
}
</style>
</div>