Docs
3D Visual Card
3D Visual Card
Displays a beautiful 3D Visual Card.
Installation
Copy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Copy and paste the Event Calendar code into your project.
API Reference
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| width | string | Container width | "300px" |
| height | string | Container height | "500px" |
| header | ReactNode | Header content | "This is Header" |
| footer | ReactNode | Footer content | "This is Footer" |
| children | ReactNode[] | Content for the boxes | ["Lorem Lorem", "Lorem Lorem"] |
| className | string | Additional CSS classes | "" |
| hoverColor | string | Hover color (CSS color value) | "rgba(0, 0, 255, 0.2)" |
| sideHeight | string | Side height for 3D effect | "16px" |
| boxShadow | string | Box shadow for hover effect | "1px 1px 10px rgba(0, 0, 0, 0.1)" |
| transformDuration | string | Transform duration for animations | "0.3s" |
Implementation Notes
- The component uses a combination of Tailwind CSS classes and custom CSS for the 3D effects
- CSS variables are used to customize the 3D effect properties
- The component is fully responsive and customizable through props
- Styled JSX is used for the 3D-specific CSS that can't be easily achieved with Tailwind alone
Usage Example
export default function Demo() {
return (
<div className="flex gap-4">
{/* 3D container with custom settings */}
<VisualContainer
width="400px"
height="550px"
hoverColor="rgba(75, 85, 99, 0.3)"
sideHeight="20px"
transformDuration="0.5s"
header={<h2 className="font-bold">Interactive 3D Container</h2>}
footer={<p className="text-sm">Hover over elements to see 3D effect</p>}
children={[
<div key="1" className="flex items-center justify-center h-full">Box 1</div>,
<div key="2" className="flex items-center justify-center h-full">Box 2</div>
]}
/>
</div>
);
}