Create a simple web interface

Fixes #154

Implement a simple web interface with a blue background, a header saying "Hello World!", and an input field for the user to enter their name.

* **Background Color**
  - Change the background color in `nodejs/axios/reactapp/src/App.css` to blue.

* **Header and Input Field**
  - Change the header in `nodejs/axios/reactapp/src/App.js` to say "Hello World!".
  - Add an input field for the user to enter their name in `nodejs/axios/reactapp/src/App.js`.

* **Documentation**
  - Add documentation for the web interface in `nodejs/axios/reactapp/README.md`.

* **Unit Test**
  - Add a unit test for the new input field in `nodejs/axios/reactapp/src/App.test.js`.

* **Tailwind CSS**
  - Import Tailwind CSS in `nodejs/axios/reactapp/src/index.css`.
  - Add Tailwind CSS configuration file `nodejs/axios/reactapp/tailwind.config.js`.
  - Add Tailwind CSS dependency in `package.json` and `package-lock.json`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/GitHub-BR-Work/code-examples/issues/154?shareId=XXXX-XXXX-XXXX-XXXX).

Author: IamGuiSantos

nodejs/axios/reactapp/README.md

@@ -68,3 +68,22 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+## Web Interface Documentation
+
+This web interface has the following features:
+- Blue background
+- Header that says "Hello World!"
+- Input field for the user to enter their name
+
+### Blue Background
+
+The background color of the web interface is set to blue. This is achieved by modifying the `nodejs/axios/reactapp/src/App.css` file.
+
+### Header
+
+The header of the web interface displays the text "Hello World!". This is achieved by modifying the `nodejs/axios/reactapp/src/App.js` file.
+
+### Input Field
+
+An input field is provided for the user to enter their name. This is achieved by modifying the `nodejs/axios/reactapp/src/App.js` file.

nodejs/axios/reactapp/src/App.css

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: blue;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

nodejs/axios/reactapp/src/App.js

@@ -1,4 +1,3 @@
-
 import './App.css'
 import './components/ProductList'
 import ProductList from './components/ProductList';
@@ -7,10 +6,9 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        
-        
+        <h1>Hello World!</h1>
+        <input type="text" placeholder="Enter your name" />
         <ProductList/>
-        
       </header>
     </div>
   );

nodejs/axios/reactapp/src/App.test.js

@@ -6,3 +6,9 @@ test('renders learn react link', () => {
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });
+
+test('renders input field', () => {
+  render(<App />);
+  const inputElement = screen.getByPlaceholderText(/Enter your name/i);
+  expect(inputElement).toBeInTheDocument();
+});

nodejs/axios/reactapp/src/index.css

@@ -1,3 +1,5 @@
+@import 'tailwindcss/tailwind.css';
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

nodejs/axios/reactapp/tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}