mizchi/shadcn-preview-plane.html

## shadcn-preview-plane.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
      :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;

        --radius: 0.5rem;
      }

      .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;

        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;

        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
      }
    }

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
  </style>
  <script>
    tailwind.config = {
      theme: {
        container: {
          center: true,
          padding: "2rem",
          screens: {
            "2xl": "1400px",
          },
        },
        extend: {
          colors: {
            border: "hsl(var(--border))",
            input: "hsl(var(--input))",
            ring: "hsl(var(--ring))",
            background: "hsl(var(--background))",
            foreground: "hsl(var(--foreground))",
            primary: {
              DEFAULT: "hsl(var(--primary))",
              foreground: "hsl(var(--primary-foreground))",
            },
            secondary: {
              DEFAULT: "hsl(var(--secondary))",
              foreground: "hsl(var(--secondary-foreground))",
            },
            destructive: {
              DEFAULT: "hsl(var(--destructive))",
              foreground: "hsl(var(--destructive-foreground))",
            },
            muted: {
              DEFAULT: "hsl(var(--muted))",
              foreground: "hsl(var(--muted-foreground))",
            },
            accent: {
              DEFAULT: "hsl(var(--accent))",
              foreground: "hsl(var(--accent-foreground))",
            },
            popover: {
              DEFAULT: "hsl(var(--popover))",
              foreground: "hsl(var(--popover-foreground))",
            },
            card: {
              DEFAULT: "hsl(var(--card))",
              foreground: "hsl(var(--card-foreground))",
            },
          },
          borderRadius: {
            lg: "var(--radius)",
            md: "calc(var(--radius) - 2px)",
            sm: "calc(var(--radius) - 4px)",
          },
          keyframes: {
            "accordion-down": {
              from: { height: 0 },
              to: { height: "var(--radix-accordion-content-height)" },
            },
            "accordion-up": {
              from: { height: "var(--radix-accordion-content-height)" },
              to: { height: 0 },
            },
          },
          animation: {
            "accordion-down": "accordion-down 0.2s ease-out",
            "accordion-up": "accordion-up 0.2s ease-out",
          },
        },
      }
    }
  </script>
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react@18",
        "react-dom/client": "https://esm.sh/react-dom@18/client",
        "class-variance-authority": "https://esm.sh/class-variance-authority",
        "@radix-ui/react-slot": "https://esm.sh/@radix-ui/react-slot",
        "clsx": "https://esm.sh/clsx",
        "tailwind-merge": "https://esm.sh/tailwind-merge"
      }
    }
  </script>
</head>

<body>
  <div id="root"></div>
  <script type="module">
    import { createElement as h, forwardRef } from "react";
    import { createRoot } from "react-dom/client";
    import { cva } from "class-variance-authority";
    import { Slot } from "@radix-ui/react-slot";
    import { clsx } from "clsx";
    import { twMerge } from "tailwind-merge";

    export function cn(...inputs) {
      return twMerge(clsx(inputs));
    }

    const buttonVariants = cva(
      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
      {
        variants: {
          variant: {
            default: "bg-primary text-primary-foreground hover:bg-primary/90",
            destructive:
              "bg-destructive text-destructive-foreground hover:bg-destructive/90",
            outline:
              "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
            secondary:
              "bg-secondary text-secondary-foreground hover:bg-secondary/80",
            ghost: "hover:bg-accent hover:text-accent-foreground",
            link: "text-primary underline-offset-4 hover:underline",
          },
          size: {
            default: "h-10 px-4 py-2",
            sm: "h-9 rounded-md px-3",
            lg: "h-11 rounded-md px-8",
            icon: "h-10 w-10",
          },
        },
        defaultVariants: {
          variant: "default",
          size: "default",
        },
      },
    );

    export const Button = forwardRef(
      ({ className, variant, size, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : "button";
        return (
          h(Comp, {
            className: cn(buttonVariants({ variant, size, className })),
            ref, asChild,
            ...props
          })
        );
      },
    );
    Button.displayName = "Button";

    const App = () => {
      return h('div', null, h(Button, { variant: "outline" }, "Hello World"));
    };
    const root = createRoot(document.querySelector('#root'));
    root.render(h(App));
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style type="text/tailwindcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

	@layer base {
	:root {
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;

	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;

	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;

	--primary: 222.2 47.4% 11.2%;
	--primary-foreground: 210 40% 98%;

	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;

	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;

	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;

	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;

	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.2 84% 4.9%;

	--radius: 0.5rem;
	}

	.dark {
	--background: 222.2 84% 4.9%;
	--foreground: 210 40% 98%;

	--card: 222.2 84% 4.9%;
	--card-foreground: 210 40% 98%;

	--popover: 222.2 84% 4.9%;
	--popover-foreground: 210 40% 98%;

	--primary: 210 40% 98%;
	--primary-foreground: 222.2 47.4% 11.2%;
	--secondary: 217.2 32.6% 17.5%;
	--secondary-foreground: 210 40% 98%;
	--muted: 217.2 32.6% 17.5%;
	--muted-foreground: 215 20.2% 65.1%;
	--accent: 217.2 32.6% 17.5%;
	--accent-foreground: 210 40% 98%;
	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 210 40% 98%;
	--border: 217.2 32.6% 17.5%;
	--input: 217.2 32.6% 17.5%;
	--ring: 212.7 26.8% 83.9%;
	}
	}

	@layer base {
	* {
	@apply border-border;
	}
	body {
	@apply bg-background text-foreground;
	}
	}
	</style>
	<script>
	tailwind.config = {
	theme: {
	container: {
	center: true,
	padding: "2rem",
	screens: {
	"2xl": "1400px",
	},
	},
	extend: {
	colors: {
	border: "hsl(var(--border))",
	input: "hsl(var(--input))",
	ring: "hsl(var(--ring))",
	background: "hsl(var(--background))",
	foreground: "hsl(var(--foreground))",
	primary: {
	DEFAULT: "hsl(var(--primary))",
	foreground: "hsl(var(--primary-foreground))",
	},
	secondary: {
	DEFAULT: "hsl(var(--secondary))",
	foreground: "hsl(var(--secondary-foreground))",
	},
	destructive: {
	DEFAULT: "hsl(var(--destructive))",
	foreground: "hsl(var(--destructive-foreground))",
	},
	muted: {
	DEFAULT: "hsl(var(--muted))",
	foreground: "hsl(var(--muted-foreground))",
	},
	accent: {
	DEFAULT: "hsl(var(--accent))",
	foreground: "hsl(var(--accent-foreground))",
	},
	popover: {
	DEFAULT: "hsl(var(--popover))",
	foreground: "hsl(var(--popover-foreground))",
	},
	card: {
	DEFAULT: "hsl(var(--card))",
	foreground: "hsl(var(--card-foreground))",
	},
	},
	borderRadius: {
	lg: "var(--radius)",
	md: "calc(var(--radius) - 2px)",
	sm: "calc(var(--radius) - 4px)",
	},
	keyframes: {
	"accordion-down": {
	from: { height: 0 },
	to: { height: "var(--radix-accordion-content-height)" },
	},
	"accordion-up": {
	from: { height: "var(--radix-accordion-content-height)" },
	to: { height: 0 },
	},
	},
	animation: {
	"accordion-down": "accordion-down 0.2s ease-out",
	"accordion-up": "accordion-up 0.2s ease-out",
	},
	},
	}
	}
	</script>
	<script type="importmap">
	{
	"imports": {
	"react": "https://esm.sh/react@18",
	"react-dom/client": "https://esm.sh/react-dom@18/client",
	"class-variance-authority": "https://esm.sh/class-variance-authority",
	"@radix-ui/react-slot": "https://esm.sh/@radix-ui/react-slot",
	"clsx": "https://esm.sh/clsx",
	"tailwind-merge": "https://esm.sh/tailwind-merge"
	}
	}
	</script>
	</head>

	<body>
	<div id="root"></div>
	<script type="module">
	import { createElement as h, forwardRef } from "react";
	import { createRoot } from "react-dom/client";
	import { cva } from "class-variance-authority";
	import { Slot } from "@radix-ui/react-slot";
	import { clsx } from "clsx";
	import { twMerge } from "tailwind-merge";

	export function cn(...inputs) {
	return twMerge(clsx(inputs));
	}

	const buttonVariants = cva(
	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
	{
	variants: {
	variant: {
	default: "bg-primary text-primary-foreground hover:bg-primary/90",
	destructive:
	"bg-destructive text-destructive-foreground hover:bg-destructive/90",
	outline:
	"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
	secondary:
	"bg-secondary text-secondary-foreground hover:bg-secondary/80",
	ghost: "hover:bg-accent hover:text-accent-foreground",
	link: "text-primary underline-offset-4 hover:underline",
	},
	size: {
	default: "h-10 px-4 py-2",
	sm: "h-9 rounded-md px-3",
	lg: "h-11 rounded-md px-8",
	icon: "h-10 w-10",
	},
	},
	defaultVariants: {
	variant: "default",
	size: "default",
	},
	},
	);

	export const Button = forwardRef(
	({ className, variant, size, asChild = false, ...props }, ref) => {
	const Comp = asChild ? Slot : "button";
	return (
	h(Comp, {
	className: cn(buttonVariants({ variant, size, className })),
	ref, asChild,
	...props
	})
	);
	},
	);
	Button.displayName = "Button";

	const App = () => {
	return h('div', null, h(Button, { variant: "outline" }, "Hello World"));
	};
	const root = createRoot(document.querySelector('#root'));
	root.render(h(App));
	</script>
	</body>

	</html>