Destination Block Component

Passport-style stamp component displaying countries visited, organized by continent with different width options, filtering capabilities, and 21 vibrant color variations.

Full Width - All Continents

My Travel Journey

22 countries across 6 continents

Africa

MOROCCO
EGYPT
SOUTH AFRICA

Asia

JAPAN
THAILAND
SINGAPORE
SOUTH KOREA
VIETNAM

Europe

FRANCE
ITALY
SPAIN
GERMANY
SWITZERLAND
NETHERLANDS

North America

UNITED STATES
CANADA
MEXICO

Oceania

AUSTRALIA
NEW ZEALAND

South America

BRAZIL
ARGENTINA
CHILE

Half Width Examples

European Adventures

6 countries in Europe

FRANCE
ITALY
SPAIN
GERMANY
SWITZERLAND
NETHERLANDS

Asian Discoveries

5 countries in Asia

JAPAN
THAILAND
SINGAPORE
SOUTH KOREA
VIETNAM

Third Width Examples

North America

3 countries in North America

UNITED STATES
CANADA
MEXICO

South America

3 countries in South America

BRAZIL
ARGENTINA
CHILE

African Safari

3 countries in Africa

MOROCCO
EGYPT
SOUTH AFRICA

Component Features

Design Elements:

  • • Passport stamp styling with thick borders
  • • Subtle rotation angles for authentic look
  • • 21 vibrant TailwindCSS color variations
  • • FontAwesome travel icons
  • • Hover effects with rotation reset

Functionality:

  • • Continent filtering (all, Europe, Asia, etc.)
  • • Flexible width options (full, 1/2, 1/3)
  • • Responsive design for all screen sizes
  • • Automatic continent grouping
  • • Country count statistics

Usage Examples:

<DestinationBlock width="full" />
<DestinationBlock continent="Europe" width="1/2" />
<DestinationBlock continent="Asia" width="1/3" title="Asian Adventures" />