fix(tailwind): instead of custom css use tailwind

src/components/Accordions/Accordion.tsx

@@ -10,28 +10,26 @@ export default function CustomAccordion({ items }: AccordionsProps) {
   const { theme } = useTheme();
   const lightThemeBg = commonColors.zinc;
   const darkThemeBg = commonColors.black;
+
   return (
-    <div className="accordion-wrapper">
-      <Accordion variant="splitted" className="accordion-container">
+    <div className="w-full flex justify-start items-start max-w-[600px] overflow-hidden p-2 rounded-lg">
+      <Accordion variant="splitted" className="overflow-x-hidden">
         {items.map((item) => (
           <AccordionItem
+            key={item.title}
+            aria-label={item.title}
+            className="last:border-b-[none]"
             style={{
               backgroundColor: theme === 'dark' ? darkThemeBg : lightThemeBg[500],
             }}
-            key={item.title}
-            aria-label={item.title}
             title={
-              <div className="flex items-center justify-between w-full">
+              <div className="flex justify-between w-full">
                 <span>{item.title}</span>
-                {item.iconSrc && <img src={item.iconSrc} alt="info icon" className="info-icon" />}
+                {item.iconSrc && <img src={item.iconSrc} alt="info icon" className="w-[37px] h-[37px] p-[5.5px]" />}
               </div>
             }
           >
-            {typeof item.content === 'string' ? (
-              <div className="accordion-item-content">{item.content}</div>
-            ) : (
-              item.content
-            )}
+            {typeof item.content === 'string' ? <div className="p-4 break-words">{item.content}</div> : item.content}
           </AccordionItem>
         ))}
       </Accordion>

src/components/Cards/Card.tsx

@@ -12,40 +12,23 @@ export default function CustomCard({ title, content }: CardProps) {
   const darkThemeBg = 'hsl(var(--nextui-content4))';
   return (
     <Card
-      className={`${'card'}`}
+      className="w-['fit-content'] h-auto min-w-[210px] justify-evenly m-2.5 p-['90px']"
       style={{
         backgroundColor: theme === 'dark' ? darkThemeBg : lightThemeBg,
       }}
     >
-      <CardHeader
-        className="cardHeader"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          overflow: 'hidden',
-        }}
-      >
-        <h2
-          className="text-large"
-          style={{
-            wordWrap: 'break-word',
-            paddingLeft: '19px',
-            paddingRight: '19px',
-          }}
-        >
-          {' '}
-          {title}{' '}
-        </h2>
+      <CardHeader className="flex flex-col items-center p-[5px] overflow-hidden">
+        <h2 className="text-large break.words"> {title} </h2>
       </CardHeader>
-      <CardBody className="cardBody">
-        <div className="cardContentContainer">
+      <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
+        <div className="flex flex-row gap-6">
           {content.map((item) => (
-            <div key={item.text} className="cardItem">
+            <div key={item.text} className="flex flex-col gap-[3px] items-center">
               <div className="imageWrapper">
-                <Image alt={item.altText} className="image" src={item.imageSrc} />
+                <Image alt={item.altText} className="w-[102px] h-[75px] rounded-xl" src={item.imageSrc} />
               </div>
-              <h1 className="text">{item.text}</h1>
-              {item.timeText && <h1 className="timeText">{item.timeText}</h1>}
+              <h1 className="text-[auto] text-center mt-2">{item.text}</h1>
+              {item.timeText && <h1 className="text-xs text-[#888888] text-center break-words">{item.timeText}</h1>}
             </div>
           ))}
         </div>

src/operations/accordions/AccordionOperations.tsx

@@ -61,7 +61,7 @@ export default class AccordionOperations {
       {
         title: 'Test',
         iconSrc: '/Images/InfoIcon.svg',
-        content: 'Test paragraph',
+        content: 'Test paragraph ',
       },
     ];
   }

src/styles/globals.css

@@ -1,106 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-/* Accordion - Container */
-.accordion-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  max-width: 600px;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  padding: 8px;
-}
-
-.accordion-container .nextui-accordion-item {
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.accordion-container .nextui-accordion-item:last-child {
-  border-bottom: none;
-}
-.accordion-container {
-  overflow-x: hidden;
-}
-.accordion-item-content {
-  padding: 16px;
-
-  word-wrap: break-word;
-}
-
-.info-icon {
-  width: 37;
-  height: 37;
-  padding: 5.5px;
-}
-
-/* Card */
-.card {
-  width: 'fit-content';
-  padding: '90px';
-  height: auto;
-  min-width: 210px;
-  margin: 10px;
-  justify-content: space-evenly;
-}
-
-.cards-wrapper {
-  margin-top: -25px;
-}
-
-.cardHeader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  display: 'flex';
-  overflow: 'hidden';
-  padding: 5px;
-  word-wrap: break-word;
-}
-
-.cardBody {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow: visible;
-  overflow-y: auto;
-  max-height: 300px;
-}
-
-.cardContentContainer {
-  display: flex;
-  flex-direction: row;
-  gap: 1.5rem;
-}
-
-.cardItem {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  align-items: center;
-}
-
-.image {
-  border-radius: 0.75rem;
-  width: 102px;
-  height: 75px;
-}
-
-.timeText {
-  font-size: 0.75rem;
-  color: #888888;
-  text-align: center;
-}
-
-.text {
-  font-size: auto;
-  text-align: center;
-  margin-top: 0.5rem;
-  word-wrap: break-word;
-}