cooler app w/ color shadows 🔥

src/App.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
+	import Nested from "./Nested.svelte";
+
 	export let name = "World";
+
+	const colors = ["cyan", "blue", "indigo"];
 </script>
 
-<main>
-	<h1 class="text-red-300">Hello {name}!</h1>
+<main class="m-3">
+	<h1 class="text-red-400 font-mono">Hello {name}!</h1>
 	<p>
 		Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn
 		how to build Svelte apps.
 	</p>
+
+	{#each colors as color}
+		<Nested {color} />
+	{/each}
 </main>

src/Nested.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let color: string;
+
+	let i = 0;
+</script>
+
+<!-- tailwind
+	<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
+	<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
+	<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
+-->
+
+<div
+	class="cursor-pointer select-none rounded px-4 py-3 mt-3 bg-{color}-500 shadow-lg shadow-{color}-500/50"
+	on:click={() => i++}
+>
+	Counter {color}
+	{i}
+</div>