Replaced all the css into tailwind css on Card component (#1762)

Author: subhajit20

components/Cards/Card/Card.js

@@ -1,7 +1,6 @@
 import { bool, node, string } from 'prop-types';
 import classNames from 'classnames';
 import { getDataAttributes } from 'common/utils/prop-utils';
-import styles from './Card.module.css';
 
 Card.propTypes = {
   children: node.isRequired,
@@ -19,7 +18,14 @@ function Card({ children, className, hasAnimationOnHover, ...props }) {
 
   return (
     <article
-      className={classNames(styles.Card, className, { [styles.animatedCard]: hasAnimationOnHover })}
+      className={classNames(
+        'items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
+        className,
+        {
+          'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg':
+            hasAnimationOnHover,
+        },
+      )}
       {...customDataAttributes}
     >
       {children}

components/Cards/Card/Card.module.css

@@ -2,15 +2,15 @@
 
 exports[`Card should render with many props assigned 1`] = `
 <article
-  className="Card test-class animatedCard"
+  className="items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none test-class shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg"
 >
   Test
 </article>
 `;
 
 exports[`Card should render with required props 1`] = `
 <article
-  className="Card"
+  className="items-center bg-white [&_svg]:fill-secondary text-secondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none"
 >
   Test
 </article>