Lingutla Prem Kumar Internship

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bulma": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.15"
   }
 }

src/App.js

@@ -1,25 +1,15 @@
-import logo from './logo.svg';
+import "bulma/css/bulma.css";
 import './App.css';
+import Navbar from './components/Navbar';
+import SignupForm from './components/SignupForm';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="bg-white">
+      <Navbar />
+      <SignupForm />
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/CoolButton.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function CoolButton({ isSuccess, children }) {
+
+    const className = isSuccess ? 'button is-success' : 'button'; 
+
+    return (
+        <button className={className}>
+            {children} 
+        </button>
+    );
+}
+
+export default CoolButton;

src/components/FormField.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function FormField({ label, type, placeholder }) {
+    return (
+        <div className="bg-white p-4 rounded shadow-md">
+            <label className="block text-black mb-2">{label}</label>
+            <div className="control">
+                <input 
+                    className="input bg-white border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
+                    type={type} 
+                    placeholder={placeholder} 
+                />
+            </div>
+        </div>
+    );
+}
+
+export default FormField;

src/components/Navbar.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import CoolButton from './CoolButton';
+
+function Navbar() {
+    return (
+        <nav className="bg-white shadow">
+            <div className="flex justify-between items-center p-4">
+                <div className='flex items-center'>
+                    <img alt="logo" src="https://bulma.io/assets/brand/Bulma%20Logo.png" className="h-10 mr-2" />
+                    <button className="navbar-item">Home</button>
+                </div>
+                <div className='flex space-x-2'>
+                    <CoolButton isSuccess>Login</CoolButton> {/* Use CoolButton for Login */}
+                    <CoolButton>Signup</CoolButton> {/* Use CoolButton for Signup */}
+                </div>
+            </div>
+        </nav>
+    );
+}
+
+export default Navbar;

src/components/SignupForm.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import FormField from './FormField';
+import CoolButton from './CoolButton';
+
+function SignupForm() {
+    return (
+        <form className="flex flex-col max-w-md mx-auto p-4 space-y-4">
+            <FormField label="Name" type="text" placeholder="e.g. Alex Smith" />
+            <FormField label="Email" type="email" placeholder="e.g. alexsmith@gmail.com" />
+            <FormField label="Password" type="password" placeholder="Enter your password" />
+            <CoolButton isSuccess>Submit</CoolButton>
+        </form>
+    );
+}
+
+export default SignupForm;

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}