Tailwind CSS Buttons

"use client";
import { ButtonsCard } from "@/registry/aceternity-ui/tailwindcss-buttons";

const buttons = [
  {
    label: "Get started",
    className:
      "px-6 py-2 rounded-full bg-black text-white text-sm font-medium hover:bg-neutral-800 transition-colors",
  },
  {
    label: "Sign up free",
    className:
      "px-6 py-2 rounded-full border border-neutral-300 dark:border-neutral-700 text-sm font-medium hover:border-neutral-500 transition-colors",
  },
  {
    label: "Learn more",
    className:
      "px-6 py-2 rounded-md bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition-colors shadow-md",
  },
  {
    label: "Explore docs",
    className:
      "px-6 py-2 rounded-md border-2 border-blue-600 text-blue-600 text-sm font-semibold hover:bg-blue-50 dark:hover:bg-blue-950 transition-colors",
  },
  {
    label: "Download",
    className:
      "px-6 py-2 rounded-lg bg-gradient-to-r from-violet-500 to-purple-600 text-white text-sm font-semibold hover:opacity-90 transition-opacity shadow-lg",
  },
  {
    label: "Contact sales",
    className:
      "px-6 py-2 rounded-lg bg-neutral-100 dark:bg-neutral-900 text-neutral-700 dark:text-neutral-300 text-sm font-medium hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors",
  },
];

export default function TailwindcssButtonsDemo() {
  return (
    <div className="grid grid-cols-3 gap-4 p-6 w-full max-w-3xl mx-auto">
      {buttons.map((btn) => (
        <ButtonsCard key={btn.label}>
          <button className={btn.className}>{btn.label}</button>
        </ButtonsCard>
      ))}
    </div>
  );
}

"use client";
import React from "react";
import { IconClipboard } from "@tabler/icons-react";
import { cn } from "@/lib/utils";

export const ButtonsCard = ({
  children,
  className,
  onClick,
}: {
  children?: React.ReactNode;
  className?: string;
  onClick?: () => void;
}) => {
  return (
    <div
      onClick={onClick}
      className={cn(
        "h-60 w-full bg-white rounded-xl border border-neutral-100 dark:bg-black dark:border-white/[0.2] hover:border-neutral-200 group/btn overflow-hidden relative flex items-center justify-center",
        className
      )}
    >
      <div className="absolute inset-0 dark:bg-dot-white/[0.1] bg-dot-black/[0.1]" />
      <IconClipboard className="absolute top-2 right-2 text-neutral-300 group-hover/btn:block hidden h-4 w-4 transition duration-200" />
      <div className="relative z-40">{children}</div>
    </div>
  );
};