<.grid num_items="1" class="gap-x-2 gap-y-2 py-4">
    <.tabs id="tab-default-line" class="max-w-fit mx-auto h-16" variant="line">
      <:tab>
        tremor.so
      </:tab>
      <:tab>
        github.com
      </:tab>
      <:tab>
        hexdocs.com
      </:tab>
      <:tabpanel>
      </:tabpanel>
      <:tabpanel>
      </:tabpanel>
      <:tabpanel>
      </:tabpanel>
    </.tabs>
    <.tabs id="tab-default-solid" class="max-w-fit mx-auto h-16" variant="solid">
      <:tab>
        tremor.so
      </:tab>
      <:tab>
        github.com
      </:tab>
      <:tab>
        hexdocs.com
      </:tab>
      <:tabpanel>
      </:tabpanel>
      <:tabpanel>
      </:tabpanel>
      <:tabpanel>
      </:tabpanel>
    </.tabs>
  </.grid>

<.card class="gap-x-2 gap-y-2 py-4">
    <.text>Total Sales</.text>
    <.metric>KES 442,276 </.metric>

    <div class="mt-8">
      <.tabs id="tab-usage-example-example-card-with-tabs" tab_class="space-x-2" tab_panels_class="min-h-16" tab_panel_class="pb-4">
          <:tab>
            <.icon name="hero-user-group-solid" />
            <span> Location A </span>
          </:tab>
          <:tab>
            <.icon name="hero-user-solid" />
            <span> Location B </span>
          </:tab>
          <:tabpanel>
            <.flex class="mt-8">
              <.text class="w-full">Product Y</.text>
              <.flex class="space-x-2 justify-end" justify_content="end">
                <.text>KES 108,799</.text>
                <.text>38%</.text>
              </.flex>
            </.flex>
            <.progress_bar value={38} class="mt-2" />
          </:tabpanel>
          <:tabpanel>
            <.flex class="mt-8">
              <.text class="w-full">Product Z</.text>
              <.flex class="space-x-2" justify_content="end">
                <.text>KES 99,484</.text>
                <.text>16%</.text>
              </.flex>
            </.flex>
            <.progress_bar value={12} class="mt-2" />
          </:tabpanel>
      </.tabs>
    </div>
  </.card>