aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/examples/with-tailwind/packages/ui/src/Card.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/with-tailwind/packages/ui/src/Card.tsx')
-rw-r--r--examples/with-tailwind/packages/ui/src/Card.tsx27
1 files changed, 27 insertions, 0 deletions
diff --git a/examples/with-tailwind/packages/ui/src/Card.tsx b/examples/with-tailwind/packages/ui/src/Card.tsx
new file mode 100644
index 0000000..6083de2
--- /dev/null
+++ b/examples/with-tailwind/packages/ui/src/Card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export const Card = ({
+ title,
+ cta,
+ href,
+}: {
+ title: string;
+ cta: string;
+ href: string;
+}) => {
+ return (
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href={href}
+ className="ui-group ui-mt-4 ui-rounded-lg ui-border ui-border-transparent ui-overflow-hidden ui-bg-origin-border ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-text-[#6b7280]"
+ >
+ <div className="ui-p-4 ui-bg-zinc-900 ui-h-full">
+ <p className="ui-inline-block ui-text-xl ui-text-white">{title}</p>
+ <div className="ui-text-xs ui-mt-4 group-hover:ui-underline">
+ {cta} →
+ </div>
+ </div>
+ </a>
+ );
+};