Convert Sponsors component styles to Tailwind in JSX

Author: ItsAbir005

src/components/Sponsors/Sponsors.jsx

@@ -1,40 +1,55 @@
+import AGChartsLogoDark from "../../assets/ag-charts-logo-dark.png";
 import AGChartsLogo from "../../assets/ag-charts-logo.png";
+import AGLogoDark from "../../assets/ag-grid-logo-dark.png";
 import AGLogo from "../../assets/ag-grid-logo.png";
 import WebpackIcon from "../../assets/icon-square-small.svg";
 import Link from "../Link/Link.jsx";
-import "../Sponsors/Sponsors.scss";
 
 const Sponsors = () => (
-  <div className="sponsors">
-    <div className="sponsors__content">
-      <div className="sponsors__link-wrapper">
+  <div className="absolute h-full w-[250px] -ml-[250px] mr-2">
+    <div className="sticky hidden my-[1.5em] top-[6em] px-[1.5em] pb-[3em] flex-wrap justify-center items-start border-r-2 border-r-[#f2f2f2] overflow-hidden transition-colors duration-[250ms] min-[1525px]:flex">
+      <div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
           <img
-            className="agGridLogo"
+            className="block dark:hidden"
             src={AGLogo}
             alt="ag grid"
             width={220}
             loading="lazy"
           />
+          <img
+            className="hidden dark:block"
+            src={AGLogoDark}
+            alt="ag grid"
+            width={220}
+            loading="lazy"
+          />
         </Link>
       </div>
-      <div className="sponsors__link-wrapper">
+      <div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
         <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
           <img
-            className="agChartsLogo"
+            className="block dark:hidden"
             src={AGChartsLogo}
             alt="ag charts"
             width={220}
             loading="lazy"
           />
+          <img
+            className="hidden dark:block"
+            src={AGChartsLogoDark}
+            alt="ag charts"
+            width={220}
+            loading="lazy"
+          />
         </Link>
       </div>
-      <div className="sponsors__link-wrapper-2">
+      <div>
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <div className="sponsors__tagline">
+          <div className="my-4 text-center text-[2em] text-[#535353] dark:text-[#cecece]">
             Datagrid and Charting for Enterprise Applications
           </div>
-          <div className="sponsors__img__wrapper">
+          <div className="flex justify-center w-full">
             <img
               src={WebpackIcon}
               alt="webpack"
@@ -43,7 +58,9 @@ const Sponsors = () => (
               loading="lazy"
             />
           </div>
-          <div className="sponsors__footer">Proud to partner with webpack</div>
+          <div className="my-4 text-center text-[1.7em] italic text-[#535353] dark:text-[#cecece]">
+            Proud to partner with webpack
+          </div>
         </Link>
       </div>
     </div>