<.carousel id="carousel-single-default" active_item={2}>
    <:carousel_item>
      <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
        1
      </div>
    </:carousel_item>
    <:carousel_item>
      <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
        2
      </div>
    </:carousel_item>
    <:carousel_item>
      <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
        3
      </div>
    </:carousel_item>
    <:carousel_item>
      <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
        4
      </div>
    </:carousel_item>
    <:carousel_item>
      <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
        5
      </div>
    </:carousel_item>
  </.carousel>