Location Tag
The Location Tag component is a smart, interactive UI element that displays a user’s location alongside a real-time clock.
On hover, it smoothly transitions from showing the location (city + country) to displaying the current time in that region, creating a subtle but powerful sense of presence.
With its live pulse indicator, responsive layout, and clean animation, this component is perfect for personal brands, portfolios, SaaS dashboards, and global products.
Automatically calculates and updates the current time based on the provided UTC offset.
Seamlessly switches between:
Location → City, Country
Time → HH:MM + Timezone
Includes a pulsing dot to simulate live availability or active status.
Supports both:
Fit Content (auto width)
Fill Container (full width with truncation support)
Handles overflow gracefully using ellipsis when space is limited.
Can function as a clickable element linking to another page or external resource.
Launchly
