doc card bg randomly change

Author: devvsakib

src/components/Doc/Doc.jsx

@@ -9,54 +9,54 @@ const Doc = () => {
           <div className='w-full md:w-5/6 mx-auto px-4 py-8'>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               <div>
-                <h4>Getting started</h4>
-                <div className="items">
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                <h4 className='mb-4'>Getting started</h4>
+                <div className="items grid grid-cols-1 gap-6">
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Set up Git' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Connecting to Github with SSH' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Creating and managing repositories' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Basic writing and formatting syntax' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
                 </div>
               </div>
               <div>
-                <h4>Popular</h4>
-                <div className="items">
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                <h4 className='mb-4'>Popular</h4>
+                <div className="items grid grid-cols-1 gap-6">
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='About pull request' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Authentication' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Adding locally hosted code to Github' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Managing remote repositories' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 
                   />
-                  <div className="bg-gray w-full h-[1px] my-4" />
+                  {/* <div className="bg-gray w-full h-[1px] my-4" /> */}
                   <DocItem 
                     title='Github pages documentation' 
                     content='Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.' 

src/components/Doc/DocItem.jsx

@@ -1,12 +1,21 @@
 import React from 'react';
 
-const DocItem = ({title, content}) => {
-    return (
-      <div className='px-2'>
-          <h6 className='text-base text-blue-400'>{title}</h6>
-          <p className='text-sm text-gray leading-tight'>{content}</p>
-      </div>
-    );
+
+const DocItem = ({ title, content }) => {
+  const changeColor = () => {
+    const colorArray = ["4024e0", "1a5ba5", "118d7c", "8d54e1", "40E4F0", "7e1aa5"]
+    const code = [1, 0, 3, 2, 5, 7]
+    let element;
+
+    return element = colorArray[Math.floor(Math.random() * 6)];
+  }
+  
+  return (
+    <div className={`p-4 rounded shadow-lg shadow-[#118d7c62] bg-[#${changeColor()}] backdrop-blur-sm`}>
+      <h6 className='font-semibold text-white text-opacity-80 mb-2'>{title}</h6>
+      <p className='text-sm text-white leading-tight'>{content}</p>
+    </div>
+  );
 };
 
 export default DocItem;