diff options
Diffstat (limited to 'examples/with-tailwindcss/src/components/Button.astro')
| -rw-r--r-- | examples/with-tailwindcss/src/components/Button.astro | 19 |
1 files changed, 19 insertions, 0 deletions
diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro new file mode 100644 index 000000000..167927fb3 --- /dev/null +++ b/examples/with-tailwindcss/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> |