Card

Cards 152

About

Location Card A visually engaging card component to display location details with an image background and a 3D tilt effect on hover. It's fully responsive and theme-adaptive.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.

Code

How Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { LocationCard } from "@/components/ui/card-17";

// Sample data for the locations
const locations = [
  {
    city: "India",
    address: "Hawa Mahal, Pink City, Jaipur, Rajasthan India",
    imageUrl: "https://cdn.21st.dev/assets/mirror/74/740222c47d4bf69328ff684fdaf3f4e01d34d940edbbe3b57d33f60912426462.jpg", // Replace with your actual image URL
    directionsUrl: "https://maps.app.goo.gl/TWAmMefs3B22wU5LA",
  },
  {
    city: "Sydney",
    address: "456 Ocean View Road, Bondi Beach, NSW 2026",
    imageUrl: "https://cdn.21st.dev/assets/mirror/c2/c2ef9661f3e913500b2e6d1a6e70079b764b5acfc424b0e7ad4c13fea73f63a9.jpg", // Replace with your actual image URL
    directionsUrl: "https://maps.app.goo.gl/3qXzH4fSjK6rB7yP8",
  },
];

const LocationCardDemo = () => {
  return (
    <div className="w-full bg-background text-foreground p-8">
      <div className="max-w-5xl mx-auto">
        <div className="mb-12">
          <p className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-2">
            LOCATIONS
          </p>
          <h1 className="text-4xl font-bold tracking-tight">
            Our Offices
          </h1>
          <p className="mt-4 text-lg text-muted-foreground">
            Find us at our offices in Sydney and New York.
          </p>
        </div>
        
        {/* Responsive grid for the location cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8" style={{ perspective: "1000px" }}>
          {locations.map((location) => (
            <LocationCard
              key={location.city}
              city={location.city}
              address={location.address}
              imageUrl={location.imageUrl}
              directionsUrl={location.directionsUrl}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default LocationCardDemo;