Modern Audio Player

by Sebastian Kay

HTML

<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" />
    <link
      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
      rel="stylesheet"
    />

    <div class="relative w-full flex flex-col">
      <header
        class="sticky top-0 z-10 p-6"
        style="background: linear-gradient(135deg, #0a0a14 0%, #111121 60%);"
      >
        <div class="max-w-7xl mx-auto flex items-center gap-6">
          <div class="flex items-center gap-4">
            <div
              class="bg-center bg-no-repeat aspect-square bg-cover rounded-md size-16"
              data-alt="Album art for 'Lost in the Echo'"
              style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD1OHK_RPdJeblrB9CxVp0nf3Lazbz8yGl_lK8k4SjXl_JwVuc1uME7Fd4Ac6uKbOEqzLNhUJbNBDeCEOdjzCc2q36t3OUyfOWpyFTX_1HkZsuSKiImj4OfmYog1yjw4nyXt7jYa_4YEzy6WWk_34yhm3QDS2zqiNYpZ5jXQbUW9657-Plg8qdG55nTqCCfoU9kUOqcEQ9Zv8_1WVMhDH5KtagydI919gNKJf9cTVbD6T2GOopqqQeaUyHeXX8Q6X2pGb3P0jey8yQ");'
            ></div>
            <div>
              <p class="text-white text-lg font-bold leading-tight truncate">
                Lost in the Echo
              </p>
              <p
                class="text-gray-400 text-sm font-normal leading-normal truncate"
              >
                Synthwave Dreamer
              </p>
            </div>
          </div>
          <div class="flex-grow flex flex-col gap-2 items-center px-8">
            <div class="flex items-center justify-center gap-4">
              <button
                class="flex shrink-0 items-center justify-center rounded-full size-10 text-white/70...

CSS

.material-symbols-outlined {
          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      }.waveform-bar {
          width: 2px;
          background-color: currentColor;border-radius: 1px;
          margin-right: 1px;}

JavaScript

tailwind.config = {
          darkMode: "class",
          theme: {
              extend: {
                  colors: {
                      "primary": "#1919e6",
                      "background-light": "#f6f6f8",
                      "background-dark": "#111121",
                  },
                  fontFamily: {
                      "display": ["Space Grotesk", "sans-serif"]
                  },
                  borderRadius: {
                      "DEFAULT": "0.5rem",
                      "lg": "1rem",
                      "xl": "1.5rem",
                      "full": "9999px"
                  },
              },
          },
      }