Card Components

A step-by-step process flow component featuring interactive cards with pin icons, hover-scale animations, and customizable color themes built with Tailwind CSS and Framer Motion.

An interactive credit card icon built with Motion that features a 3D rotating animation effect on hover or as a continuous loop.

A set of interactive statistic cards featuring staggered rotation, smooth hover-triggered scale animations, and a mix of data-driven text and image-based layouts built with Framer Motion.

A minimalist card component featuring a dual-layered border design with a muted background, utilizing placeholder elements for structured content display.

A minimalist card component featuring a thick, high-contrast outer border and a clean internal layout with placeholder elements for titles and content.

A responsive image-focused card featuring a hover-triggered slide-up overlay with a backdrop-blur effect, utilizing the @unpic/react library for optimized image rendering.

A minimalist card component featuring a subtle border-wrapped container, a muted background, and placeholder elements for title and content sections, designed for layout scaffolding.

A square-shaped card component featuring an integrated responsive image using @unpic/react, a clean header layout, and placeholder content blocks for a modern UI display.

A square-shaped card component featuring a full-width image header, integrated skeleton placeholders for title and content, and a clean, modern layout built with Tailwind CSS and the unpic image library.

A square-shaped card featuring a full-bleed background image with a dynamic gradient overlay that fades out on hover to reveal content placeholders.

A square-shaped card component featuring a full-width background image with a hover-triggered backdrop blur effect and placeholder content slots, built using Tailwind CSS and the Unpic image library.

A square image-based card featuring a responsive background image with a dynamic gradient overlay that fades on hover, utilizing the unpic-react library for optimized image rendering.

A layered card component featuring a stacked visual effect with multiple offset background layers, creating a depth-focused aesthetic using Tailwind CSS utility classes.

A layered card component featuring a decorative background shadow effect created with an absolute positioned div and CSS transforms to provide a stacked visual depth.

A layered card component featuring a decorative background element with scale transforms to create a subtle 3D depth effect using Tailwind CSS.

A layered card component featuring a decorative, rotated background element behind the main content container to create a modern, stacked visual effect.

A modern card component featuring a transparent background with a decorative, multi-colored radial gradient overlay and placeholder content slots.

A minimalist card component featuring a transparent background with subtle, layered radial gradient overlays and placeholder content blocks for a modern, clean aesthetic.

A minimalist card component featuring a decorative background pattern created with CSS linear gradients and a transparent container, designed for placeholder content layouts.

A decorative card component featuring a dotted border style and a subtle radial grid background pattern, built with Tailwind CSS and shadcn/ui primitives.