Description text field are implemented. Still, there are several inconsistencies that are needed to be fixed in future bug fixing issues and branchs. Plus, one type of description text fields could not be implemented.

Client/src/components/TextFields/Description/DescriptionTextField.jsx

@@ -1,8 +1,21 @@
 import React from "react";
 import "./descriptionTextField.css";
+import { TextField } from "@mui/material";
 
-function DescriptionTextField() {
-  return <div>DescriptionTextField</div>;
+function DescriptionTextField({ hintText, hasError }) {
+  return (
+    <div className="description-field-holder">
+      <div className="text-field-title">Website</div>
+      <TextField
+        error={hasError}
+        className="description-field-area"
+        multiline
+        rows={4}
+        placeholder="Enter a description..."
+        helperText={hintText}
+      />
+    </div>
+  );
 }
 
 export default DescriptionTextField;

Client/src/components/TextFields/Description/descriptionTextField.css

@@ -0,0 +1,32 @@
+:root {
+  --color-title-1: #344054;
+  --font-family-1: "Roboto", "Helvetica", "Arial", sans-serif;
+  --text-field-margin-0: 10px 20px;
+}
+
+.description-field-holder {
+  margin: var(--text-field-margin-0);
+  margin-top: 20px;
+}
+
+.text-field-title {
+  color: var(--color-title-1);
+  font-weight: bold;
+  font-family: var(--font-family-1);
+  margin-bottom: 10px;
+}
+
+.description-field-area {
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.description-field-label {
+  margin-top: 10px;
+  font-family: var(--font-family);
+  font-size: 11px;
+}
+
+.with-error {
+  color: red;
+}

Client/src/screens/PlayGround/PlayGround.jsx

@@ -3,6 +3,7 @@ import EmailTextField from "../../components/TextFields/Email/EmailTextField";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WebsiteTextField from "../../components/TextFields/Website/WebsiteTextField";
+import DescriptionTextField from "../../components/TextFields/Description/DescriptionTextField";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -42,6 +43,16 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
+      <br />
+      <br />
+      <hr />
+      {/* Now, illustration of the Description text fields */}
+      <br />
+      <DescriptionTextField hintText="This is a hint text to help user." />
+      <DescriptionTextField
+        hasError={true}
+        hintText="This is a hint text to help user."
+      />
     </div>
   );
 }