textarea

src/components/TextArea/TextArea.scss

+
+.form-control {
+    display: block;
+    width: 46%;
+    height: calc(1.5em + 1.25rem + 2px);
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #8898aa;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+  .form-control {
+    font-size: .875rem;
+    height: calc(1.5em + 1.25rem + 5px);
+    transition: all .15s ease-in-out;
+  }
+  .form-control:focus {
+    color: #8898aa;
+    border-color: #5e72e4;
+    outline: 0;
+    background-color: #fff;
+    
+  
+  }
\ No newline at end of file

src/components/TextArea/index.jsx

+import { type } from '@testing-library/user-event/dist/type';
+import React from 'react'
+import PropTypes from "prop-types";
+import "./TextArea.scss";
+
+
+function TextArea(props) {
+  const{customClass,value,handleChange,placeholder}=props;
+
+    return (
+    <div>
+    <input className={`${customClass}`} value={value} onChange={handleChange} placeholder={placeholder}/>
+    </div>
+    )
+    }
+
+
+export default TextArea

src/containers/Login/index.jsx

 import React from "react";
-
+import TextArea from "../../components/TextArea";
 
 function Login(props) {
   return (
 
      <div>
-     Login
+      <div className="form-group">             
+      <textarea rows="4" className="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
+      </div>
      </div>
   )