popup modal with textfield is created

Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx

@@ -0,0 +1,36 @@
+import "./dualButtonPopupModalWithTextfields.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { TextField } from "@mui/material";
+
+function DualButtonPopupModalWithTextfields() {
+  return (
+    <div className="popup-modal-holder">
+      <div className="popup-modal-header">
+        <div className="popup-modal-title">Create new organization</div>
+        <div className="popup-modal-close">
+          <CloseIcon style={{ fill: "#98A2B3" }} />
+        </div>
+      </div>
+      <div className="spacing-height"></div>
+      {PopupModalTextfield()}
+      <div className="spacing-height"></div>
+      <div className="spacing-height"></div>
+      <div className="popup-modal-controllers">
+        <button className="white-cancel-button">Cancel</button>
+        <button className="blue-save-button">Save</button>
+      </div>
+    </div>
+  );
+}
+
+export default DualButtonPopupModalWithTextfields;
+
+function PopupModalTextfield() {
+  return (
+    <div className="popup-modal-input">
+      <div className="popup-modal-input-title">Name</div>
+      <input type="text" className="popup-modal-text-field" />
+    </div>
+  );
+}

Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css

@@ -0,0 +1,60 @@
+:root {
+  --popup-color-with-input-border-0: #f2f2f2;
+  --popup-color-with-input-border-1: #d0d5dd;
+  --popup-modal-with-input-title-color: #344054;
+}
+
+.popup-modal-holder {
+  width: 480px;
+  font-family: var(--popup-font-family-0);
+  padding: 50px 40px;
+  border-radius: 4px;
+  margin: 10px 20px;
+  border: 1px solid var(--popup-color-with-input-border-0);
+  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+}
+
+.popup-modal-header {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+}
+
+.popup-modal-close {
+  cursor: pointer;
+}
+
+.spacing-height {
+  height: 30px;
+}
+
+.popup-modal-input-title {
+  margin-bottom: 20px;
+  color: var(--popup-modal-with-input-title-color);
+}
+
+.popup-modal-text-field {
+  width: 100%;
+  height: 35px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+}
+
+.popup-modal-controllers {
+  display: flex;
+  justify-content: end;
+}
+
+.white-cancel-button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--popup-font-family-0);
+  margin: 5px 10px;
+  width: 145px;
+  height: 35px;
+  padding: 5px 20px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+  cursor: pointer;
+}