src/components/AccordionBody/AccordionBody.tsx

@@ -0,0 +1,36 @@
+import Col from "react-bootstrap/Col";
+import ListGroup from "react-bootstrap/ListGroup";
+import Row from "react-bootstrap/Row";
+import Tab from "react-bootstrap/Tab";
+
+import styles from "./accordionBody.module.scss";
+const AccordionBody = () => {
+  return (
+    <Tab.Container id="list-group-tabs" defaultActiveKey="#link1">
+      <Row>
+        <Col sm={4}>
+          <ListGroup>
+            <ListGroup.Item className={styles["acc-item"]} action href="#link1">
+              Link 1
+            </ListGroup.Item>
+            <ListGroup.Item action href="#link2">
+              Link 2
+            </ListGroup.Item>
+          </ListGroup>
+        </Col>
+        <Col sm={8}>
+          <Tab.Content>
+            <Tab.Pane eventKey="#link1">
+              <p>oi</p>
+            </Tab.Pane>
+            <Tab.Pane eventKey="#link2">
+              <p>tchau</p>
+            </Tab.Pane>
+          </Tab.Content>
+        </Col>
+      </Row>
+    </Tab.Container>
+  );
+};
+
+export { AccordionBody };

src/components/AccordionBody/accordionBody.module.scss

@@ -0,0 +1,17 @@
+.accordion-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.accordion-item {
+  display: flex;
+  flex-direction: row;
+}
+.accordion-header {
+}
+/*
+.list-group-tabs.active {
+  background-color: red;
+}*/
+.acc-item .active {
+  background-color: red;
+}

src/components/FormInput/FormInput.tsx

@@ -195,7 +195,7 @@ const FormInput = () => {
             </div>
             <div className={styles["form-col"]}>
               <div className={styles["form-text"]}>
-                <label htmlFor="nascimento">Data de Nascimento</label>
+                <label htmlFor="nascimento">Data de Nascimento:</label>
                 <ErrorMessage
                   component="span"
                   name="nascimento"

src/components/FormInput/formInput.module.scss

@@ -23,7 +23,7 @@
   margin: 0 auto;
   padding: 0 12px;
   display: flex;
-  align-items: center;
+
   justify-content: center;
   flex-direction: column;
 }
@@ -31,6 +31,7 @@
   font-weight: 700;
   font-size: 27px;
   margin: 0 0 12px 0;
+
   @media screen and (min-width: 2500px) {
     font-size: 48px;
   }

src/pages/Home.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { FormInput } from "../components/FormInput/FormInput";
+import { AccordionBody } from "../components/AccordionBody/AccordionBody";
 
 const Home = () => {
   //const style = { background: "black" };
   return (
     <div /*style={style}*/>
-      <FormInput></FormInput>
+      <AccordionBody />
     </div>
   );
 };

src/styles/common/global.scss

@@ -18,3 +18,12 @@ button {
 li {
   list-style-type: none;
 }
+/*
+$grid-breakpoints: (
+  xs: 0,
+  sm: 375px,
+  md: 768px,
+  lg: 1025px,
+  xl: 1280px,
+  xxl: 2500px,
+);*/