diff --git a/javascript/index.html b/javascript/index.html
new file mode 100644
index 0000000..0d0b140
--- /dev/null
+++ b/javascript/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ Wizard List
+
+
+
+
+
+
diff --git a/javascript/input.css b/javascript/input.css
new file mode 100644
index 0000000..e69de29
diff --git a/javascript/output.css b/javascript/output.css
new file mode 100644
index 0000000..e69de29
diff --git a/javascript/package.json b/javascript/package.json
new file mode 100644
index 0000000..2cd625e
--- /dev/null
+++ b/javascript/package.json
@@ -0,0 +1,8 @@
+{
+ "scripts": {
+ "start": "npx tailwindcss -i ./input.css -o ./output.css --watch"
+ },
+ "devDependencies": {
+ "tailwindcss": "^3.4.1"
+ }
+ }
\ No newline at end of file
diff --git a/javascript/scripts.js b/javascript/scripts.js
new file mode 100644
index 0000000..673c054
--- /dev/null
+++ b/javascript/scripts.js
@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', function(){
+ const list = document.getElementById('wizardList');
+
+const harry = {name: 'Harry Potter', hair: 'black'};
+const hermoine = {name: 'Hermoine Granger', hair: 'brown'};
+const ron = {name: 'Ron Weasley', hair: 'red'};
+
+const wizards = [harry,hermoine,ron];
+
+wizards.forEach(wizard => {
+const listItem = document.createElement('li');
+listItem.textContent = wizard.name;
+listItem.style.color = wizard.hair;
+list.appendChild(listItem);
+});
+});
diff --git a/javascript/tailwind.config.js b/javascript/tailwind.config.js
new file mode 100644
index 0000000..9dc06f5
--- /dev/null
+++ b/javascript/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./*.{html,js}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
\ No newline at end of file