Sync from 0947a69192ad6820970902c7c951fb0cf31fcf4bexamples/with-tailwindcss

1 files changed, 19 insertions, 0 deletions

diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 000000000..167927fb3
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,19 @@
+---
+// Click button, get confetti!
+// Styled by Tailwind :)
+---
+
+<button
+	class="appearance-none py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"
+>
+	<slot />
+</button>
+
+<script>
+	import confetti from 'canvas-confetti';
+	const button = document.body.querySelector('button');
+
+	if (button) {
+		button.addEventListener('click', () => confetti());
+	}
+</script>