Converted all the css into Tailwind css of Container component

components/Container/Container.js

@@ -1,7 +1,6 @@
 import { bool, node, number, oneOf, oneOfType, string } from 'prop-types';
 import classNames from 'classnames';
 import { getDataAttributes } from 'common/utils/prop-utils';
-import styles from './Container.module.css';
 
 Container.propTypes = {
   backgroundImageSource: string,
@@ -42,14 +41,23 @@ function Container({
 
   return (
     <div
-      className={classNames(className, styles.Container, styles[theme], {
-        [styles.fullViewportHeight]: isFullViewportHeight,
-      })}
+      className={classNames(
+        className,
+        'bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current',
+        theme === 'secondary' && 'bg-secondary text-white [& svg]:fill-white',
+        theme === 'gray' && 'bg-gray text-secondary',
+        theme === 'white' && 'bg-white text-secondary',
+        {
+          'min-h-screen': isFullViewportHeight,
+        },
+      )}
       id={id}
       style={dynamicBackgroundImage}
       {...customDataAttributes}
     >
-      <div className={styles.content}>{children}</div>
+      <div className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]">
+        {children}
+      </div>
     </div>
   );
 }

components/Container/__tests__/__snapshots__/Container.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`Container should render with many props assigned 1`] = `
 <div
-  className="test-class Container white fullViewportHeight"
+  className="test-class bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-white text-secondary min-h-screen"
   style={
     Object {
       "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
     }
   }
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     Test Children
   </div>

components/Content/__tests__/__snapshots__/Content.test.js.snap

@@ -2,11 +2,11 @@
 
 exports[`Content should render with many props assigned 1`] = `
 <div
-  className="Container secondary fullViewportHeight"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white min-h-screen"
   id="test-id"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="headingContainer"
@@ -59,10 +59,10 @@ exports[`Content should render with many props assigned 1`] = `
 
 exports[`Content should render with required props 1`] = `
 <div
-  className="Container secondary"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="flex justify-center items-center flex-wrap w-full [&>*]:m-4"

components/HeroBanner/__tests__/__snapshots__/HeroBanner.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`HeroBanner should render with many props assigned 1`] = `
 <div
-  className="test pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] Container secondary fullViewportHeight"
+  className="test pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white min-h-screen"
   style={
     Object {
       "backgroundImage": "linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65)), url(https://operation-code-assets.s3.us-east-2.amazonaws.com/heroBanner/stock_family-2.jpg)",
     }
   }
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <h1
       className="border-b-4 border-b-primary text-center mb-4"
@@ -25,10 +25,10 @@ exports[`HeroBanner should render with many props assigned 1`] = `
 
 exports[`HeroBanner should render with required props 1`] = `
 <div
-  className="pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] min-h-[35vh] Container secondary"
+  className="pt-20 min-h-[60vh] text-shadow-[0_0_15px_#111111] min-h-[35vh] bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-secondary text-white [& svg]:fill-white"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <h1
       className=""

components/ReusableSections/JoinSection/__tests__/__snapshots__/JoinSection.test.js.snap

@@ -2,11 +2,11 @@
 
 exports[`JoinSection should render 1`] = `
 <div
-  className="Container white"
+  className="bg-center bg-no-repeat bg-cover flex items-center justify-center min-h-[250px] w-full fill-current bg-white text-secondary"
   data-testid="Join Section"
 >
   <div
-    className="content"
+    className="flex flex-col items-center justify-center my-14 mx-auto w-full max-w-[1400px] sm:w-[85%]"
   >
     <div
       className="headingContainer"

tailwind.config.js

@@ -22,6 +22,8 @@ module.exports = {
         themeGray: '#121212',
         primary: '#3ed6f0',
         secondary: '#252e3e',
+        gray: '#e2e2e2',
+        white: '#f7f7f7',
       },
     },
   },