Eingabefeld, Listenansicht erstellt

Eingabefeld fertig + Listenansicht

src/App.css

@@ -2,8 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url("https://fonts.googleapis.com/css2?family=Quicksand&display=swap");
+
 .App {
   text-align: center;
+  font-family: qicksand, arial;
 }
 
 .App-logo {

src/App.js

@@ -1,9 +1,10 @@
-import Eingabefelder from "./Components/eingabefelder";
+import Eingabefeld from "./Components/eingabefeld";
+import "../node_modules/font-awesome/css/font-awesome.min.css";
 
 function App() {
   return (
     <div className="App">
-      <Eingabefelder label="test" placeholder="password" />
+      <Eingabefeld label="Name" isPassword={false} placeholder="&#xf007;" />
       <p className="from-green-50">tets</p>
     </div>
   );

src/Components/eingabefeld.jsx

@@ -5,8 +5,10 @@ function Eingabefeld(props) {
   return (
     <div>
       <label>{props.label}</label>
+      <br />
       <input
         className="form-control
+        border-radius: 5px
         block
         w-220
         h-35
@@ -15,11 +17,11 @@ function Eingabefeld(props) {
         text-base
         font-normal
         border border-solid border-gray-300
-        rounded
-        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+        rounded"
         onChange={(e) => setPollName(e.target.value)}
         value={usepollName}
         placeholder={props.placeholder}
+        type={props.isPassword ? "password" : "text"}
       />
     </div>
   );

src/Components/liste.jsx

@@ -0,0 +1,11 @@
+import React, { useState } from "react";
+
+function Liste(props) {
+  return (
+    <div>
+      <Label></Label>
+    </div>
+  );
+}
+
+export default Liste;

src/index.css

@@ -4,14 +4,16 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  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;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+input {
+  font-family: FontAwesome;
 }