Feat: Card base style

apps/frontend/package.json

@@ -26,7 +26,6 @@
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
-    "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"

apps/frontend/src/components/Card.tsx

@@ -3,19 +3,46 @@ import React from 'react'
 
 export function Card() {
   return (
-    <div className="flex justify-between rounded bg-tertiary p-4 shadow-lg outline">
-      <div className="flex">
+    <div className="before:bg-primary relative flex flex-col justify-between gap-4 rounded bg-white p-4 font-semibold shadow-lg before:absolute before:left-0 before:top-0 before:z-10 before:h-full before:w-1  md:flex-row md:px-6 md:py-8">
+      <div className="md:flex md:items-center md:gap-4">
         <Image
           src="/assets/images/company-logo.svg"
           alt="logo"
-          className="h-auto w-auto"
+          className="-mt-11 h-14 w-14 rounded-full md:static md:mt-0 md:h-auto md:w-auto"
           width={40}
           height={40}
         />
-        <div>header content</div>
+        <div className="mt-4 flex w-full flex-col gap-1 md:mt-0">
+          <div className="flex gap-4">
+            <span className="text-primary">Photosnap</span>
+            <div className="flex gap-2 uppercase text-white">
+              <span className="bg-primary rounded-full px-2 py-1 text-xs">
+                new!
+              </span>
+              <span className="bg-secondary rounded-full px-2 py-1 text-xs">
+                featured
+              </span>
+            </div>
+          </div>
+          <h2 className="text-secondary capitalize">
+            senior frontend developer
+          </h2>
+          <div className="text-secondary-light flex flex-wrap items-center gap-2 text-xs capitalize">
+            <span className="p-1">1d ago</span>
+            <span>&#x2022;</span>
+            <span className="p-1">full time</span>
+            <span>&#x2022;</span>
+            <span className="p-1">USA only</span>
+          </div>
+        </div>
       </div>
-      <div>
-        <span>tags</span>
+      <hr className="md:hidden" />
+      <div className="text-primary flex flex-wrap items-center gap-4 capitalize">
+        <span className="bg-tertiary rounded px-2 py-0.5">frontend</span>
+        <span className="bg-tertiary rounded px-2 py-0.5">senior</span>
+        <span className="bg-tertiary rounded px-2 py-0.5">HTML</span>
+        <span className="bg-tertiary rounded px-2 py-0.5">senior</span>
+        <span className="bg-tertiary rounded px-2 py-0.5">HTML</span>
       </div>
     </div>
   )