src/components/Container.stories.tsx

@@ -24,7 +24,7 @@ export default {
  * on a returning component.
  */
 const Template: ComponentStory<typeof Container> = (args) => (
-  <Container {...args}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
+  <Container {...args}></Container>
 );
 //
 /* -------------------------------------------------------------------------- */
@@ -32,14 +32,58 @@ const Template: ComponentStory<typeof Container> = (args) => (
 /* -------------------------------------------------------------------------- */
 
 export const Desktop: ComponentStory<typeof Container> = Template.bind({});
+Desktop.args = {
+  className: 'bg-blue-500 w-840 block',
+  children: <div>840px</div>,   
+    
+}
+
 Desktop.parameters = {
   viewport: {
      defaultViewport: 'desktop',
+     
+     viewports: {
+
+          desktop: {
+            name: 'main_container',
             styles: {
-        height: '568px',
+                width: '840px',
-        width: '320px',
+                height: '100%',
+                paddingLeft: '0.5rem',
+                paddingRight: '0.5rem',
             },
+            type: 'desktop',
           },
 
+          screen_sm: {
+            name: 'screen_sm',
+            styles: {
+                width:  'calc(100% - 30px)',
+                height: '100%',
+            },
+            type: 'tablet',
+          },
 
+          screen_md: {
+            name: 'screen_md',
+            styles: {
+                width:  'calc(100% - 30px)',
+                height: '100%',
+            },
+            type: 'tablet',
+          },
+
+          screen_lg_xl_2xl: {
+            name: 'lg-xl-2xl',
+            styles: {
+                width: '840px',
+                height: '100%',
+            },
+            type: 'desktop',
+          },
+     }
+  }
 }
+
+
+ 

src/components/Container.tsx

@@ -1,4 +1,7 @@
 import classNames from "classnames";
+import '../index.css';
+
+
 type Props = {
   /**
    * Content of compnent