feat(card): add card component + extend tailwind instead of overwrite

src/components/common/Card/Card.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Card: React.FC<{}> = ({ children }) => {
+  return <div className="inline-block bg-light shadow-lg overflow-hidden sm:rounded-lg">{children}</div>;
+};
+
+export default Card;

src/components/common/Card/CardBody.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardBody: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-5 sm:px-6">{children}</div>;
+};
+
+export default CardBody;

src/components/common/Card/CardFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardFooter: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">{children}</div>;
+};
+
+export default CardFooter;

src/components/common/Card/CardHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardHeader: React.FC<{}> = ({ children }) => {
+  return <div className="mx-4 px-4 py-3 text-left text-2xl border-b border-gray-200">{children}</div>;
+};
+
+export default CardHeader;

src/components/common/Card/index.ts

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';

tailwind.config.js

@@ -1,23 +1,25 @@
 module.exports = {
   theme: {
-    colors: {
-      primary: {
-        DEFAULT: 'var(--color-primary)',
-        light: 'var(--color-primary-light)',
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          light: 'var(--color-primary-light)',
+        },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          light: 'var(--color-secondary-light)',
+          lightest: 'var(--color-secondary-lightest)',
+          darkest: 'var(--color-secondary-darkest)',
+        },
+        dark: 'var(--color-dark)',
+        light: 'var(--color-light)',
       },
-      secondary: {
-        DEFAULT: 'var(--color-secondary)',
-        light: 'var(--color-secondary-light)',
-        lightest: 'var(--color-secondary-lightest)',
-        darkest: 'var(--color-secondary-darkest)',
+      fontFamily: {
+        sans: ['Poppins'],
+        serif: ['Georgia'],
+        mono: ['Roboto'],
       },
-      dark: 'var(--color-dark)',
-      light: 'var(--color-light)',
-    },
-    fontFamily: {
-      sans: ['Poppins'],
-      serif: ['Georgia'],
-      mono: ['Roboto'],
     },
   },
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],