Grid

by Sebastian Kay

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div
  class="flex flex-row flex-nowrap w-full overflow-x-scroll box-border scroll-smooth snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [scroll-marker-group:before] [&::scroll-marker-group]:flex [&::scroll-marker-group]:justify-center [&::scroll-marker-group]:h-[1em] [&::scroll-marker-group]:gap-2 [&::scroll-marker-group]:py-2 *:[&::scroll-marker]:content-[''] *:[&::scroll-marker]:h-[1em] *:[&::scroll-marker]:w-[1em] *:[&::scroll-marker]:bg-gray-700 *:[&::scroll-marker]:rounded-[1em] *:[&::scroll-marker]:transition-width *:[&::scroll-marker]:duration-300 *:[&::scroll-marker:target-current]:bg-indigo-600 *:[&::scroll-marker:target-current]:w-[2em]"
>

  <div class="box-border min-w-[100%] snap-start">
    <div
      id="track_cards_wrapper"
      class="box-border px-6 py-8 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"
    ></div>
  </div>

  <div class="min-w-[100%] snap-end box-border">
    <div id="playlist_wrapper" class="px-6 py-8 flex flex-col gap-6">
    </div>
  </div>
  
</div>

Tailwind CSS

body {
    /* width */
    &::-webkit-scrollbar {
        width: 10px;
        background-color: var(--color-gray-900);
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
        border: 2px solid rgba(0, 0, 0, 0);
        background-clip: padding-box;
        border-radius: 1rem;
        background-color: var(--color-gray-800);
    }

    /* Handle */
    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-indigo-500);
    }
}

JavaScript

document.querySelector("html").dataset.theme = "dark";
document.querySelector("body").className = "bg-white dark:bg-gray-900";

const track_cards_wrapper = document.querySelector("#track_cards_wrapper");
const playlist_wrapper = document.querySelector("#playlist_wrapper");

let i1 = 0;
let i2 = 0;

while (i1 < 12) {
    const elem = document.createElement("div")
    elem.className = `h-[200px] bg-gray-800 rounded-lg px-6 py-8 text-white`;
    elem.textContent = `Tracklist Card No.: ${i1 + 1}`;
    track_cards_wrapper.append(elem);
  i1++;
}

while (i2 < 12) {
    const elem = document.createElement("div")
    elem.className = `bg-gray-800 rounded-lg px-6 py-8 text-white`;
    elem.textContent = `Playlist Entry No.: ${i2 + 1}`;
    playlist_wrapper.append(elem);
  i2++;
}