Replaced all the css into tailwind css on FlatCard component

components/Cards/FlatCard/FlatCard.js

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import Image from 'next/image';
 import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
 import { getPlaceholder } from 'common/utils/next-utils';
-import styles from './FlatCard.module.css';
 
 FlatCard.propTypes = {
   button: element,
@@ -28,16 +27,19 @@ function FlatCard({ button: Button, children, className, header, image }) {
 
   return (
     <article
-      className={classNames(styles.FlatCard, className, {
-        [styles.cardWithImage]: hasImage,
+      className={classNames('box-border my-6 mx-4 relative max-w-[400px]', className, {
+        'pt-14': hasImage,
       })}
     >
-      <div className={styles.borderContainer}>
-        {header && <div className={styles.header}>{header}</div>}
+      <div className="p-8 border-4 border-solid border-themePrimary">
+        {header && <div className="order-2 text-center">{header}</div>}
 
         {hasImage && (
-          <div className={styles.rowCenter}>
-            <div data-testid={FLAT_CARD_IMAGE} className={styles.imageWrapper}>
+          <div className="flex justify-center">
+            <div
+              data-testid={FLAT_CARD_IMAGE}
+              className="border-solid border-themePrimary border-[3px] order-1 absolute -top-4 h-52 [&>img]:object-cover"
+            >
               <Image
                 src={image.source}
                 alt={image.alt ?? ''}
@@ -50,11 +52,15 @@ function FlatCard({ button: Button, children, className, header, image }) {
           </div>
         )}
 
-        {header && <hr className={styles.divider} />}
+        {header && <hr className="w-10/12 border-solid border-themePrimary" />}
 
-        <div className={styles.children}>{children}</div>
+        <div>{children}</div>
 
-        {Button && <div className={styles.flatCardButton}>{Button}</div>}
+        {Button && (
+          <div className="text-center absolute left-0 right-0 -bottom-7 [&>button]:hover:bg-white [&>button]:hover:text-themeSecondary [&>button]:focus-visible:text-themePrimary [&>button]:focus-visible:bg-white [&>a]:hover:bg-white [&>a]:hover:text-themeSecondary [&>a]:focus-visible:bg-white [&>a]:focus-visible:text-themeSecondary ">
+            {Button}
+          </div>
+        )}
       </div>
     </article>
   );

components/Cards/FlatCard/__tests__/__snapshots__/FlatCard.test.js.snap

@@ -2,13 +2,13 @@
 
 exports[`FlatCard should render with many props assigned 1`] = `
 <article
-  className="FlatCard test-class"
+  className="box-border my-6 mx-4 relative max-w-[400px] test-class"
 >
   <div
-    className="borderContainer"
+    className="p-8 border-4 border-solid border-themePrimary"
   >
     <div
-      className="header"
+      className="order-2 text-center"
     >
       <h1>
         Main heading
@@ -18,11 +18,9 @@ exports[`FlatCard should render with many props assigned 1`] = `
       </h6>
     </div>
     <hr
-      className="divider"
+      className="w-10/12 border-solid border-themePrimary"
     />
-    <div
-      className="children"
-    >
+    <div>
       <p>
         Example content goes here
       </p>
@@ -31,7 +29,7 @@ exports[`FlatCard should render with many props assigned 1`] = `
       </p>
     </div>
     <div
-      className="flatCardButton"
+      className="text-center absolute left-0 right-0 -bottom-7 [&>button]:hover:bg-white [&>button]:hover:text-themeSecondary [&>button]:focus-visible:text-themePrimary [&>button]:focus-visible:bg-white [&>a]:hover:bg-white [&>a]:hover:text-themeSecondary [&>a]:focus-visible:bg-white [&>a]:focus-visible:text-themeSecondary "
     >
       <a
         className="Button primary"
@@ -48,14 +46,12 @@ exports[`FlatCard should render with many props assigned 1`] = `
 
 exports[`FlatCard should render with required props 1`] = `
 <article
-  className="FlatCard"
+  className="box-border my-6 mx-4 relative max-w-[400px]"
 >
   <div
-    className="borderContainer"
+    className="p-8 border-4 border-solid border-themePrimary"
   >
-    <div
-      className="children"
-    >
+    <div>
       <p>
         Example content goes here
       </p>