Incluindo props nos componentes

src/App.js

@@ -1,6 +1,5 @@
 import Banner from './componentes/Banner/banner';
 import Form from './componentes/form/form'
-
 function App() {
   return (
     <div className="App">

src/componentes/ListaSuspensa/ListaSuspensa.css

@@ -0,0 +1,22 @@
+.lista-suspensa select {
+    background-color: #FFF;
+    box-shadow: 10px 10px 30px rgba(0, 0, 0.06);
+    width: 100%;
+    border: none;
+    font-size: 24px;
+    padding: 24px;
+    border-radius: 10px;
+}
+
+.lista-suspensa {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 24px;
+}
+
+.lista-suspensa label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 20px;
+    font-weight: bold
+}

src/componentes/ListaSuspensa/ListaSuspensa.js

@@ -0,0 +1,17 @@
+import "./ListaSuspensa.css"
+
+
+const ListaSuspensa = (props) => {
+  return (
+    <div className="lista-suspensa">
+      <label>{props.label}</label>
+      <select required={props.required}>
+        {props.itens.map((item) => {
+          return <option key={item}>{item}</option>;
+        })}
+      </select>
+    </div>
+  );
+};
+
+export default ListaSuspensa;

src/componentes/TextField/TextField.css

@@ -9,10 +9,10 @@
 }
 .text-field input {
     background-color: #FFF;
-    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.06);
-    width: 50%;
+    box-shadow: 10px 10px 30px rgba(0, 0, 0.06);
+    width: 100%;
     border: none;
     font-size: 24px;
     padding: 24px;
-    box-sizing: border-box;
+    border-radius: 10px;
 }

src/componentes/TextField/TextField.js

@@ -6,7 +6,7 @@ const TextField = (props) => {
             <label>
                 {props.label}
             </label>
-            <input placeholder={`${props.placeholder}...`}/>
+            <input required={props.obrigatorio} placeholder={`${props.placeholder}...`}/>
         </div>
     )
 }

src/componentes/botao/botao.css

@@ -0,0 +1,15 @@
+.botao {
+    background-color: #6278f7;
+    border-radius: 10px;
+    font-weight: 700;
+    font-size: 18px;
+    padding: 32px;
+    border: none; 
+    cursor: pointer;
+    color: #FFF;
+    margin: 16px 0;
+}
+
+.botao:hover {
+    color: #95FFD4
+}

src/componentes/botao/botao.js

@@ -0,0 +1,9 @@
+import "./botao.css"
+
+const Botao = (props) => {
+    return (<button className='botao'>
+        {props.children}
+    </button>)
+}
+
+export default Botao

src/componentes/form/form.css

@@ -1,12 +1,12 @@
 .formulario {
     display: flex;
     justify-content: center;
-    margin: 80 px 0;
+    margin: 80px 0;
 }
 .formulario form {
     max-width: 80%;
     background-color: #F2F2F2;
     border-radius: 20px;
     padding: 36px 64px;
-    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.08);
+    box-shadow: 8px 8px 16px rgba(0, 0 ,0, 0.08);
 }

src/componentes/form/form.js

@@ -1,14 +1,33 @@
+import ListaSuspensa from "../ListaSuspensa/ListaSuspensa";
 import TextField from "../TextField/TextField";
+import Botao from "../botao/botao"
 import "./form.css";
 
 const Formulario = () => {
+  const times = [
+    'Programação',
+    'Front-End',
+    'Data Science',
+    'Devops',
+    'UX e Design',
+    'Mobile',
+    'Inovação e Gestão'
+  ]
+
+  const save = (e) => {
+    e.preventDefault()
+    console.log('o form foi submetido!')
+  }
+
   return (
     <section className="formulario">
-      <form>
+      <form onSubmit={save}>
         <h2>Preencha os dados para criar o card do colaborador</h2>
-        <TextField label="Nome" placeholder="Digite o seu nome" />
-        <TextField label="Cargo" placeholder="Digite o seu cargo" />
+        <TextField obrigatorio={true} label="Nome" placeholder="Digite o seu nome" />
+        <TextField obrigatorio={true} label="Cargo" placeholder="Digite o seu cargo" />
         <TextField label="Imagem" placeholder="Digite o endereço da sua imagem"/>
+        <ListaSuspensa obrigatorio={true} label="Time" itens={times}/>
+        <Botao children="Criar Card"/>
       </form>
     </section>
   );