Card with stacked depth effect

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
</script>

<template>
  <div class="relative size-fit">
    <!-- Card -->
    <Card class="relative z-1 w-full max-w-xs">
      <CardHeader>
        <CardTitle>Default Card</CardTitle>
        <CardDescription>
          This card uses the default size variant.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          The card component supports a size prop that defaults to
          "default" for standard spacing and sizing.
        </p>
      </CardContent>
      <CardFooter>
        <Button variant="outline" class="w-full">
          Action
        </Button>
      </CardFooter>
    </Card>
    <!-- Depth effect -->
    <div class="bg-card rounded-lg absolute inset-4 -bottom-3 z-0 border shadow-md shadow-black/1" />
    <div class="bg-card rounded-lg absolute inset-2 -bottom-1.5 z-0 border shadow-md shadow-black/1" />
  </div>
</template>