From 14a64cb7e5d7be60f7d4aaf5515dd99a5fe589a5 Mon Sep 17 00:00:00 2001
From: "Steve St.Pierre" <stephencstpierre@gmail.com>
Date: Sat, 28 Sep 2024 12:17:28 -0400
Subject: [PATCH] Add TailwindCSS to stack carousel

---
 .../StackCarousel/StackCarousel.tsx           |  7 ++++
 .../logos/TailwindLogo/TailwindLogo.tsx       | 34 +++++++++++++++++++
 .../components/logos/TailwindLogo/index.ts    |  1 +
 3 files changed, 42 insertions(+)
 create mode 100644 packages/web/components/logos/TailwindLogo/TailwindLogo.tsx
 create mode 100644 packages/web/components/logos/TailwindLogo/index.ts

diff --git a/packages/web/components/StackCarousel/StackCarousel.tsx b/packages/web/components/StackCarousel/StackCarousel.tsx
index 9b62280..80030cc 100644
--- a/packages/web/components/StackCarousel/StackCarousel.tsx
+++ b/packages/web/components/StackCarousel/StackCarousel.tsx
@@ -20,6 +20,7 @@ import StyledComponentsLogo from '../logos/StyledComponentsLogo';
 import DockerLogo from '../logos/DockerLogo';
 import GraphqlLogo from '../logos/GraphqlLogo';
 import PrettierLogo from '../logos/PrettierLogo';
+import TailwindLogo from '../logos/TailwindLogo/TailwindLogo';
 
 const StackCarousel = () => {
   const { theme } = useTheme();
@@ -98,6 +99,12 @@ const StackCarousel = () => {
       <li className={styles.slide}>
         <GraphqlLogo />
       </li>
+      <li className={styles.slide}>
+        <TailwindLogo />
+        <span className={styles.wordMark} aria-hidden>
+          TailwindCSS
+        </span>
+      </li>
     </ul>
   );
 };
diff --git a/packages/web/components/logos/TailwindLogo/TailwindLogo.tsx b/packages/web/components/logos/TailwindLogo/TailwindLogo.tsx
new file mode 100644
index 0000000..24427b4
--- /dev/null
+++ b/packages/web/components/logos/TailwindLogo/TailwindLogo.tsx
@@ -0,0 +1,34 @@
+interface Props {
+  className?: string;
+  size?: number;
+}
+
+const TailwindLogo = ({ className, size = 96 }: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 54 33"
+      width={size}
+      height={size}
+      className={className}
+    >
+      <title>TailwindCSS</title>
+      <g clip-path="url(#prefix__clip0)">
+        <path
+          fill="#38bdf8"
+          fill-rule="evenodd"
+          d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
+          clip-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="prefix__clip0">
+          <path fill="#fff" d="M0 0h54v32.4H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default TailwindLogo;
diff --git a/packages/web/components/logos/TailwindLogo/index.ts b/packages/web/components/logos/TailwindLogo/index.ts
new file mode 100644
index 0000000..d329bc8
--- /dev/null
+++ b/packages/web/components/logos/TailwindLogo/index.ts
@@ -0,0 +1 @@
+export { default } from './TailwindLogo';
\ No newline at end of file