Cards

export default function Basic() {
  return (
    <div className="w-full overflow-hidden rounded border bg-background">
      <div className="p-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

export default function MobileFullWidth() {
  return (
    <div className="w-full overflow-hidden border-y bg-background sm:rounded sm:border">
      <div className="p-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

export default function HeaderAndFooter() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="p-4">
        <div className="h-10 border-4 border-dotted bg-primary-foreground" />
      </div>
      <div className="p-4">
        <div className="h-52 border-4 border-dotted bg-primary-foreground" />
      </div>
      <div className="p-4">
        <div className="h-10 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

export default function List() {
  return (
    <ul
      role="list"
      className="w-full divide-y overflow-hidden rounded border bg-background"
    >
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
    </ul>
  );
}

export default function ListMobileFull() {
  return (
    <ul
      role="list"
      className="w-full divide-y overflow-hidden bg-background sm:rounded sm:border"
    >
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="p-4">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
    </ul>
  );
}

export default function ListSeperateCards() {
  return (
    <ul role="list" className="w-full space-y-3">
      <li className="w-full overflow-hidden border-y bg-background p-4 sm:rounded sm:border">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="w-full overflow-hidden border-y bg-background p-4 sm:rounded sm:border">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="w-full overflow-hidden border-y bg-background p-4 sm:rounded sm:border">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
      <li className="w-full overflow-hidden border-y bg-background p-4 sm:rounded sm:border">
        <div className="h-12 border-4 border-dotted bg-primary-foreground" />
      </li>
    </ul>
  );
}