Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="overflow-y-auto rounded-md border flex gap p-4" style="--column-gap: 1rem; max-inline-size: 24rem;">
  <figure class="flex flex-col gap shrink-0">
    <img width="300" height="400" class="object-cover rounded-md" style="aspect-ratio: 3/4; inline-size: 150px;" src="/assets/unsplash-1-ce6f0d74.webp" />
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Ornella Binni</span></figcaption>
  </figure>
  <figure class="flex flex-col gap shrink-0">
    <img width="300" height="400" class="object-cover rounded-md" style="aspect-ratio: 3/4; inline-size: 150px;" src="/assets/unsplash-2-de3ea928.webp" />
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Tom Byrom</span></figcaption>
  </figure>
  <figure class="flex flex-col gap shrink-0">
    <img width="300" height="400" class="object-cover rounded-md" style="aspect-ratio: 3/4; inline-size: 150px;" src="/assets/unsplash-3-5df005ee.webp" />
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Vladimir Malyavko</span></figcaption>
  </figure>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="overflow-y-auto rounded-md border flex gap p-4" style="--column-gap: 1rem; max-inline-size: 24rem;">
  <figure class="flex flex-col gap shrink-0">
    <%= image_tag "unsplash-1.webp", width: 300, height: 400, class: "object-cover rounded-md", style: "aspect-ratio: 3/4; inline-size: 150px;" %>
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Ornella Binni</span></figcaption>
  </figure>
  <figure class="flex flex-col gap shrink-0">
    <%= image_tag "unsplash-2.webp", width: 300, height: 400, class: "object-cover rounded-md", style: "aspect-ratio: 3/4; inline-size: 150px;" %>
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Tom Byrom</span></figcaption>
  </figure>
  <figure class="flex flex-col gap shrink-0">
    <%= image_tag "unsplash-3.webp", width: 300, height: 400, class: "object-cover rounded-md", style: "aspect-ratio: 3/4; inline-size: 150px;" %>
    <figcaption class="text-xs text-subtle">Photo by <span class="font-semibold">Vladimir Malyavko</span></figcaption>
  </figure>
</div>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.

No notes provided.