Navigation - Copy this React, Tailwind Component to your project

/* Navigation Styles */ .top-nav { position: fixed; width: 100%; z-index: 1000; padding: 20px 0; } .nav-list { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } .nav-list li { margin: 0 20px; position: relative; } .nav-list li:not(:last-child)::after { content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background-color: rgba(255, 255, 255, 0.5); } .nav-list a { color: white; text-decoration: none; font-size: 16px; transition: color 0.3s ease; } .nav-list a:hover { color: rgba(255, 255, 255, 0.7); } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/images/hero-bg.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: white; text-align: center; } .hero-content { max-width: 800px; } .hero h1 { font-size: 64px; margin-bottom: 20px; letter-spacing: 4px; } .tagline { font-size: 18px; margin-bottom: 40px; letter-spacing: 1px; } .explore-btn { display: inline-block; width: 120px; height: 120px; background-color: #E87D7D; border-radius: 50%; color: white; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform 0.3s ease; } .explore-btn:hover { transform: scale(1.1); color: white; }