added changes to Container.stories.tsx,Container.tsx,tailwind.config.js

src/components/Container.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import Container from './Container';
+
+export default {
+  // Title inside navigation bar
+  title: 'Container',
+  // Component to test
+  component: Container,
+  // Clarifying the way how to process specific
+  // properties of your component and which values
+  // it can accept.
+} as ComponentMeta<typeof Container>;
+
+/**
+ * This is a way to define a tempalte for your component.
+ * 
+ * This template should cover all the states.
+ * 
+ * In most cases you should just distruct args attribute
+ * on a returning component.
+ */
+const Template: ComponentStory<typeof Container> = (args) => (
+  <Container {...args}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
+);
+//
+/* -------------------------------------------------------------------------- */
+/*                          States of your component                          */
+/* -------------------------------------------------------------------------- */
+
+export const Desktop: ComponentStory<typeof Container> = Template.bind({});
+Desktop.parameters = {
+    viewport: {
+      defaultViewport: 'desktop',
+      styles: {
+        height: '568px',
+        width: '320px',
+      },
+    },
+    
+    
+}

src/components/Container.tsx

@@ -1,17 +1,22 @@
+import classNames from "classnames";
 type Props = {
+  /**
+   * Content of compnent
+   */
   children: React.ReactNode;
+  /**
+   * Compnent styling
+   */
   className?: string;
-  }
-
-  /* -------------------------------------------------------------------------- */
-  /*                      default is 840px as our template                      */
-  /* -------------------------------------------------------------------------- */
-  
-  export default function Container({children, className}: Props) {
+}
+/**
+ * Main container to handle page content max-width on
+ * different screen sizes
+ */
+export default function Container({children, className}: Props) {
   return (
-      <div className={ (className) ? className : 'w-[840px]' }>
+    <div className={ classNames('container mx-auto', className) }>
       {children}
     </div>
   )
-  }
-  
+}

tailwind.config.js

@@ -67,7 +67,7 @@ module.exports = {
     function ({ addComponents }) {
       addComponents({
         '.container': {
-          maxWidth: '100%',
+          maxWidth: '840px',
           paddingLeft: '0.5rem',
           paddingRight: '0.5rem',
           '@screen sm': {
@@ -77,13 +77,13 @@ module.exports = {
             maxWidth: 'calc(100% - 30px)',
           },
           '@screen lg': {
-            maxWidth: '960px',
+            maxWidth: '840px',
           },
           '@screen xl': {
-            maxWidth: '1080px',
+            maxWidth: '840px',
           },
           '@screen 2xl': {
-            maxWidth: '1080px',
+            maxWidth: '840px',
           },
         },
       });