diff --git a/examples/element-factory/src/alert-button.jsx b/examples/element-factory/src/alert-button.jsx
new file mode 100644
index 0000000..da8da76
--- /dev/null
+++ b/examples/element-factory/src/alert-button.jsx
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export const AlertButton = ({}) => {
+  const [message, setMessage] = useState('Alert!');
+
+  return (
+    <div>
+      <label>
+        Message
+        <input
+          type="text"
+          value={message}
+          onChange={(event) => setMessage(event.target.value)}
+        />
+      </label>
+
+      <button onClick={() => alert(message)}>Trigger Alert</button>
+    </div>
+  );
+};
diff --git a/examples/element-factory/src/alert-button.test.jsx b/examples/element-factory/src/alert-button.test.jsx
new file mode 100644
index 0000000..72c0d04
--- /dev/null
+++ b/examples/element-factory/src/alert-button.test.jsx
@@ -0,0 +1,34 @@
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { AlertButton } from './alert-button';
+
+describe('AlertButton', () => {
+  beforeEach(() => {
+    vi.spyOn(window, 'alert').mockImplementation(() => {});
+    render(<AlertButton />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should render an alert button', async () => {
+    const button = screen.getByRole('button', { name: /trigger alert/i });
+
+    expect(button).toBeInTheDocument();
+  });
+
+  it('should trigger an alert', async () => {
+    const button = screen.getByRole('button', { name: /trigger alert/i });
+    const messageInput = screen.getByLabelText(/message/i);
+
+    await act(async () => {
+      await userEvent.clear(messageInput);
+      await userEvent.type(messageInput, 'Hello, world!');
+      await userEvent.click(button);
+    });
+
+    expect(window.alert).toHaveBeenCalledWith('Hello, world!');
+  });
+});
diff --git a/examples/element-factory/vitest.config.ts b/examples/element-factory/vitest.config.ts
index f694ed2..3c340b6 100644
--- a/examples/element-factory/vitest.config.ts
+++ b/examples/element-factory/vitest.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vitest/config';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
-  plugins: [svelte()],
+  plugins: [svelte(), react()],
   test: {
     environment: 'happy-dom',
     globals: true,
diff --git a/examples/task-list/index.html b/examples/task-list/index.html
index 7ae33e3..f53c832 100644
--- a/examples/task-list/index.html
+++ b/examples/task-list/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Task List</title>
-    <script src="./src/index.tsx" type="module"></script>
+    <script src="./src/index.jsx" type="module"></script>
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
diff --git a/packages/css-configuration/index.js b/packages/css-configuration/index.js
index 832ea97..0ad1bca 100644
--- a/packages/css-configuration/index.js
+++ b/packages/css-configuration/index.js
@@ -9,7 +9,7 @@ export const css = {
   postcss: {
     plugins: [
       tailwindcss({
-        content: ['./**/*.{html,js,jsx,ts,tsx}'],
+        content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
         theme: {
           extend: {
             container: {
