2 files changed, 41 insertions, 0 deletions
diff --git a/components/ViewPort/index.module.scss b/components/ViewPort/index.module.scss
new file mode 100644
index 0000000..c9b6ab0
--- /dev/null
+++ b/components/ViewPort/index.module.scss
@@ -0,0 +1,18 @@
+.viewport-sm, .viewport-md, .viewport-lg {
+    margin: 0 auto;
+}
+
+.viewport-sm {
+    width: 50%;
+    width: calc(110px + 44vw);
+}
+
+.viewport-md {
+    width: 60%;
+    width: calc(80px + 55vw);
+}
+
+.viewport-lg {
+    width: 85%;
+    width: calc(25px + 85vw);
+}
+\ No newline at end of file
diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx
new file mode 100644
index 0000000..665ee00
--- /dev/null
+++ b/components/ViewPort/index.tsx
@@ -0,0 +1,23 @@
+import React, { FC } from "react"
+import styles from './index.module.scss';
+import clsx from 'clsx';
+
+export type Props = {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+
+const Viewport : FC<Props> = ({children, className, size}) => {
+    const _size : string = size || "md";
+    const sizeClass : string = styles['viewport-' + _size];
+
+    return (
+        <div
+            className={clsx(sizeClass, className)}
+        >
+            {children}
+        </div>
+    )
+};
+
+export default Viewport;
+\ No newline at end of file