Working with tailwind at exercise 1.4

.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
+	"customizations": {
+		"vscode": {
+			"settings": {
+				"editor.defaultFormatter": "esbenp.prettier-vscode",
+				"workbench.editorAssociations": {   
+					"*.md": "vscode.markdown.preview.editor"
+				}
+			},
+			"extensions": ["learn-pack.learnpack-vscode"]
+		}
+	},
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	"onCreateCommand": "npm i jest@29.7.0 -g && npm i jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.29 -g && learnpack plugins:install @learnpack/react"
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

exercises/01.4-advanced-tailwind-techniques/app.jsx

@@ -1,28 +1,28 @@
-// Advanced Tailwind Techniques in React
-// 
-// In this exercise, you will create a React component that demonstrates the use of advanced Tailwind CSS features.
-// 
-// Instructions:
-// 1. Create a React component that includes a button and an icon.
-// 2. Apply Tailwind pseudo-classes to change the button's background color on hover and focus.
-// 3. Add an animation to the icon using Tailwind's animation utilities.
-// 4. Ensure the component is responsive and looks good on both mobile and desktop screens.
-// 
-// Example:
-// - Use `hover:bg-green-500` and `focus:bg-green-700` for the button.
-// - Apply `animate-bounce` to the icon.
-// 
-// Start coding below:
+// index.js
+import React from "react";
+import ReactDOM from "react-dom";
 
-import React from 'react';
+const script = document.createElement("script");
+script.src = "https://cdn.tailwindcss.com";
+script.onload = () => {
+	ReactDOM.render(<AdvancedTailwindComponent />, document.getElementById("myDiv"));
+};
+document.head.appendChild(script);
 
 function AdvancedTailwindComponent() {
-  return (
-    <div className="flex flex-col items-center justify-center min-h-screen">
-      {/* Add your button here */}
-      {/* Add your icon here */}
-    </div>
-  );
+	return (
+		<div className="flex flex-col items-center justify-center min-h-screen p-4 sm:p-0">
+			<button className="bg-green-400 hover:bg-green-500 focus:bg-green-700 text-white px-4 py-2 rounded transition-colors">Press me</button>
+			<svg
+				width={20}
+				height={20}
+				xmlns="http://www.w3.org/2000/svg"
+				className="mt-6 w-12 h-12 text-green-600 animate-bounce"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor">
+				<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+			</svg>
+		</div>
+	);
 }
-
-export default AdvancedTailwindComponent;