diff --git a/awesome-oss-docs/src/component/card.jsx b/awesome-oss-docs/src/component/card.jsx
index f0414d4..96a45e7 100644
--- a/awesome-oss-docs/src/component/card.jsx
+++ b/awesome-oss-docs/src/component/card.jsx
@@ -1,56 +1,46 @@
-import DocSection from './docSection';
-// import jsonData from '../constants/data';
-import DocCard from './docCard';
-import docs from '../constants/docs';
-import logo from '../component/imgs/logo.svg';
+import React from "react";
+import DocSection from "./docSection";
+import DocCard from "./docCard"; // Import your DocCard component
+import docs from "../constants/docs";
+import logo from "../component/imgs/logo.svg";
 
 export default function Card() {
   const onGoToClick = (url) => {
-    window.open(url, '_blank'); // Open the URL in a new tab
+    window.open(url, "_blank"); // Open the URL in a new tab
   };
 
-  console.log(docs);
-
+  // Check if docs is not undefined or null before mapping over it
+  if (!docs || !Array.isArray(docs)) {
+    console.error("Invalid data:", docs);
+    return <div>Error: Invalid data</div>; // Display an error message if data is not available or not in the expected format
+  }
 
   return (
     <div>
-      {/* {jsonData.documentationSets.map((documentation, index) => (
-        <DocSection key={index} title={documentation.title}>
-          {documentation.projects.map((project, projectIndex) => (
-            <DocCard
-              key={projectIndex}
-              title={project.title}
-              logoSrc={project.logoSrc}
-              description={project.description}
-              stars={project.stars}
-              isDocumentation={project.isDocumentation}
-              isOpenSource={project.isOpenSource}
-              goToProject={() => {
-                onGoToClick(project.projectUrl);
-              }}
-              goToGithub={() => {
-                onGoToClick(project.githubUrl);
-              }}
-            />
-          ))}
-        </DocSection>
-      ))} */}
-
-      {docs.map((doc, index) => (
-        <DocSection key={index} title={doc.title}>
-          {doc.documentations.map((documentation, index) => (
-            <DocCard
-              key={index}
-              title={documentation.title}
-              logoSrc={logo}
-              description={documentation.description}
-              owner={documentation.owner}
-              goToGithub={() => onGoToClick(documentation.githubUrl)}
-              goToProject={() => onGoToClick(documentation.projectUrl)}
-            />
-          ))}
-        </DocSection>
-      ))}
+      {docs.map((doc) => {
+        console.log("doc:", doc);
+        return (
+          <DocSection key={doc.title} title={doc.title}>
+            {/* Pass valid React elements (DocCard components) as children */}
+            {doc.documentations &&
+              Array.isArray(doc.documentations) &&
+              doc.documentations.map((documentation) => {
+                console.log("documentation:", documentation);
+                return (
+                  <DocCard
+                    key={documentation.title}
+                    title={documentation.title}
+                    logoSrc={logo}
+                    description={documentation.description}
+                    owner={documentation.owner}
+                    goToGithub={() => onGoToClick(documentation.githubUrl)}
+                    goToProject={() => onGoToClick(documentation.projectUrl)}
+                  />
+                );
+              })}
+          </DocSection>
+        );
+      })}
     </div>
   );
 }
diff --git a/awesome-oss-docs/src/component/docSection.jsx b/awesome-oss-docs/src/component/docSection.jsx
index 70b85b5..16faaf7 100644
--- a/awesome-oss-docs/src/component/docSection.jsx
+++ b/awesome-oss-docs/src/component/docSection.jsx
@@ -18,5 +18,4 @@ DocSection.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-
 export default DocSection;
diff --git a/awesome-oss-docs/src/constants/docs/index.js b/awesome-oss-docs/src/constants/docs/index.js
index 0504842..40b908e 100644
--- a/awesome-oss-docs/src/constants/docs/index.js
+++ b/awesome-oss-docs/src/constants/docs/index.js
@@ -20,6 +20,7 @@ import mayadata from "./orderByAlphabet/mayadata";
 import samsung from './orderByAlphabet/samsung';
 import shopify from "./orderByAlphabet/shopify";
 import suse from "./orderByAlphabet/suse";
+import tailwind from "./orderByAlphabet/tailwind";
 import twilio from "./orderByAlphabet/twilio";
 import twitter from "./orderByAlphabet/twitter";
 import uber from "./orderByAlphabet/uber";
@@ -48,6 +49,7 @@ export default [
   samsung,
   shopify,
   suse,
+  tailwind,
   twilio,
   twitter,
   uber,
diff --git a/awesome-oss-docs/src/constants/docs/orderByAlphabet/tailwind.js b/awesome-oss-docs/src/constants/docs/orderByAlphabet/tailwind.js
new file mode 100644
index 0000000..8c95239
--- /dev/null
+++ b/awesome-oss-docs/src/constants/docs/orderByAlphabet/tailwind.js
@@ -0,0 +1,13 @@
+export default {
+    title: "Tailwind Open Source Documentation",
+    documentations: [
+      {
+        title: "Tailwind Docs",
+        description: "Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.",
+        projectUrl: "https://v2.tailwindcss.com/docs/installation",
+        githubUrl: "https://github.com/tailwindlabs/tailwindcss",
+        owner: "Community Owned Documentation"
+      }
+    ]
+  }
+  
\ No newline at end of file