Free
Hero
JourneyMuse Hero
A hero block extracted from the JourneyMuse template, available in Tailwind CSS and Bootstrap.
0
2
journeymuse.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JourneyMuse Hero | Tailwind CSS UI Block</title>
<meta name="description" content="A hero block extracted from the JourneyMuse template, available in Tailwind CSS and Bootstrap.">
<meta name="keywords" content="JourneyMuse, Tailwind CSS template, HTML website template, travel blog template, adventure journal, destination guides, responsive editorial design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="JourneyMuse | Tailwind CSS Travel Blog Template">
<meta property="og:description" content="A polished Tailwind CSS travel blog template for destination stories, practical guides, adventure journals, and inspiring editorial content.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="JourneyMuse template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="JourneyMuse | Tailwind CSS Travel Blog Template">
<meta name="twitter:description" content="A polished Tailwind CSS travel blog template for destination stories, practical guides, adventure journals, and inspiring editorial content.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="JourneyMuse template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: 180ms ease-out both page-fade-out;
}
::view-transition-new(root) {
animation: 220ms ease-in both page-fade-in;
}
@keyframes page-fade-out {
to { opacity: 0; }
}
@keyframes page-fade-in {
from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
body {
font-family: 'Inter', sans-serif;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body class="bg-gray-50 text-gray-900">
<!-- block:start hero -->
<header id="hero" class="relative px-4 sm:px-6 lg:px-8 py-8">
<div data-hero-carousel aria-roledescription="carousel" aria-label="Featured travel stories" class="max-w-7xl mx-auto relative rounded-3xl overflow-hidden h-[500px] sm:h-[600px]">
<div data-hero-slide aria-hidden="false" class="absolute inset-0 transition-opacity duration-700 opacity-100">
<img class="absolute inset-0 w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_33c1bfafb6_67d6d1fd19f1de82.png" alt="Traveler overlooking red rock canyons at sunset" />
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-8 sm:p-12 w-full">
<div class="max-w-3xl">
<span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-xs font-bold uppercase tracking-wider mb-4">Adventure</span>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">Beyond the Horizon: The Unseen Beauty of Highland Treks</h1>
<p class="text-white/80 text-lg mb-8 line-clamp-2">Discover the secret paths and hidden vistas that only the most dedicated explorers ever witness. This is your guide to the ultimate wilderness experience.</p>
<div class="flex items-center gap-4">
<img class="w-10 h-10 rounded-full border-2 border-white/30" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="Arthur Sterling" />
<div class="text-white">
<span class="block text-sm font-bold">Arthur Sterling</span>
<span class="text-xs text-white/60">Oct 14, 2024 • 12 mins read</span>
</div>
</div>
</div>
</div>
</div>
<div data-hero-slide aria-hidden="true" class="absolute inset-0 transition-opacity duration-700 opacity-0 pointer-events-none">
<img class="absolute inset-0 w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_267f86f764_73cd430d0dc6e00c.png" alt="Colorful Mediterranean market filled with spices and textiles" />
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-8 sm:p-12 w-full">
<div class="max-w-3xl">
<span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-xs font-bold uppercase tracking-wider mb-4">Culture</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">The Spice Route: Flavors of the Mediterranean</h2>
<p class="text-white/80 text-lg mb-8 line-clamp-2">Follow the aromas of coastal markets and meet the cooks preserving generations of Mediterranean tradition.</p>
<div class="flex items-center gap-4">
<img class="w-10 h-10 rounded-full border-2 border-white/30" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="Julian Cross" />
<div class="text-white">
<span class="block text-sm font-bold">Julian Cross</span>
<span class="text-xs text-white/60">Oct 10, 2024 • 15 mins read</span>
</div>
</div>
</div>
</div>
</div>
<div data-hero-slide aria-hidden="true" class="absolute inset-0 transition-opacity duration-700 opacity-0 pointer-events-none">
<img class="absolute inset-0 w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_bf62e48b50_179e7dd367983ce4.png" alt="High-speed train crossing a snowy mountain landscape" />
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-8 sm:p-12 w-full">
<div class="max-w-3xl">
<span class="inline-block px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-xs font-bold uppercase tracking-wider mb-4">Slow Travel</span>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">The Quiet Magic of Crossing Europe by Rail</h2>
<p class="text-white/80 text-lg mb-8 line-clamp-2">Trade airport queues for panoramic windows and rediscover the landscapes between Europe’s great cities.</p>
<div class="flex items-center gap-4">
<img class="w-10 h-10 rounded-full border-2 border-white/30" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="Leo Sterling" />
<div class="text-white">
<span class="block text-sm font-bold">Leo Sterling</span>
<span class="text-xs text-white/60">Oct 05, 2024 • 6 mins read</span>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 right-8 sm:bottom-12 sm:right-12 z-10 flex gap-2" aria-label="Choose featured story">
<button type="button" data-hero-dot aria-label="Show story 1" aria-current="true" class="w-3 h-3 rounded-full bg-white transition-colors"></button>
<button type="button" data-hero-dot aria-label="Show story 2" aria-current="false" class="w-3 h-3 rounded-full bg-white/30 transition-colors hover:bg-white/60"></button>
<button type="button" data-hero-dot aria-label="Show story 3" aria-current="false" class="w-3 h-3 rounded-full bg-white/30 transition-colors hover:bg-white/60"></button>
</div>
</div>
</header>
<script>
document.querySelectorAll('[data-hero-carousel]').forEach((carousel) => {
const slides = Array.from(carousel.querySelectorAll('[data-hero-slide]'));
const dots = Array.from(carousel.querySelectorAll('[data-hero-dot]'));
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let activeIndex = 0;
let rotation;
const showSlide = (index) => {
activeIndex = (index + slides.length) % slides.length;
slides.forEach((slide, slideIndex) => {
const isActive = slideIndex === activeIndex;
slide.classList.toggle('opacity-100', isActive);
slide.classList.toggle('opacity-0', !isActive);
slide.classList.toggle('pointer-events-none', !isActive);
slide.setAttribute('aria-hidden', String(!isActive));
});
dots.forEach((dot, dotIndex) => {
const isActive = dotIndex === activeIndex;
dot.classList.toggle('bg-white', isActive);
dot.classList.toggle('bg-white/30', !isActive);
dot.setAttribute('aria-current', String(isActive));
});
};
const stopRotation = () => window.clearInterval(rotation);
const startRotation = () => {
if (reduceMotion) return;
stopRotation();
rotation = window.setInterval(() => showSlide(activeIndex + 1), 6000);
};
dots.forEach((dot, index) => dot.addEventListener('click', () => {
showSlide(index);
startRotation();
}));
carousel.addEventListener('mouseenter', stopRotation);
carousel.addEventListener('mouseleave', startRotation);
carousel.addEventListener('focusin', stopRotation);
carousel.addEventListener('focusout', startRotation);
carousel.addEventListener('keydown', (event) => {
if (event.key === 'ArrowLeft') showSlide(activeIndex - 1);
if (event.key === 'ArrowRight') showSlide(activeIndex + 1);
});
startRotation();
});
</script>
<!-- block:end hero -->
<script>
document.querySelectorAll('[data-blog-grid]').forEach((grid) => {
const section = grid.closest('section');
const filters = section.querySelectorAll('[data-blog-filter]');
const posts = grid.querySelectorAll('[data-blog-category]');
const inactiveClasses = ['text-gray-600', 'font-medium', 'hover:bg-gray-100'];
filters.forEach((button) => {
button.addEventListener('click', () => {
const selectedCategory = button.dataset.blogFilter;
filters.forEach((filter) => {
const isActive = filter === button;
filter.setAttribute('aria-pressed', String(isActive));
filter.classList.toggle('bg-[#4a6b8a]', isActive);
filter.classList.toggle('text-white', isActive);
filter.classList.toggle('font-bold', isActive);
inactiveClasses.forEach((className) => filter.classList.toggle(className, !isActive));
});
posts.forEach((post) => {
post.hidden = selectedCategory !== 'all' && post.dataset.blogCategory !== selectedCategory;
});
});
});
});
</script>
</body>
</html>
From this template
Free
Blog
JourneyMuse
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access