Old Astro setup

src/components/Card.astro

@@ -0,0 +1,9 @@
+---
+import Heading from "./Heading.astro";
+---
+
+<div class="card p-6 border-white border-[1px] border-opacity-10 bg-slate-300 bg-opacity-5 rounded-xl">
+  <Heading tag="h2">
+    Test
+  </Heading>
+</div>

src/components/Heading.astro

@@ -0,0 +1,23 @@
+---
+interface Props {
+	tag: 'h1' | 'h2' | 'h3';
+}
+
+const { tag = "h1" } = Astro.props;
+---
+
+{tag === 'h1' &&
+  <h1 class="font-heading text-5xl font-bold">
+    <slot />
+  </h1>
+}
+{tag === 'h2' &&
+  <h1 class="font-heading text-3xl font-bold">
+    <slot />
+  </h1>
+}
+{tag === 'h3' &&
+  <h1 class="font-heading text-xl font-bold">
+    <slot />
+  </h1>
+}