Free
Call to action
JourneyMuse Call to action
A call to action 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 Call to action | Tailwind CSS UI Block</title>
<meta name="description" content="A call to action 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 cta -->
<section id="promo" class="px-4 sm:px-6 lg:px-8 pb-24">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Promo Card -->
<div class="lg:col-span-4 relative rounded-3xl overflow-hidden min-h-[400px] flex flex-col justify-between p-10 group">
<img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ee0d4e5e17_661bdbfaf92fdd03.png" alt="modern architectural hotel villa with glass walls overlooking a foggy valley" />
<div class="absolute inset-0 bg-black/40"></div>
<div class="relative z-10">
<div class="w-12 h-12 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6">
<i class="fa-solid fa-bed text-white"></i>
</div>
<h3 class="text-3xl font-bold text-white mb-4">Elevate your stay experience</h3>
<p class="text-white/80 text-sm">Curated luxury accommodations that redefine what it means to be away from home.</p>
</div>
<div class="relative z-10">
<button class="bg-white text-[#4a6b8a] px-6 py-3 rounded-xl font-bold text-sm flex items-center gap-2 hover:bg-gray-100 transition-all">
Book Your Retreat
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<!-- Right Promo Card -->
<div class="lg:col-span-8 flex flex-col gap-8">
<!-- Large Background Text Card -->
<div class="relative rounded-3xl overflow-hidden flex-1 min-h-[300px] flex items-center justify-center group">
<img class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_171fb79234_096bd6318351118f.png" alt="top view of a coastal road winding along white cliffs and turquoise water, bright daylight" />
<div class="absolute inset-0 bg-black/20"></div>
<h2 class="relative z-10 text-3xl sm:text-4xl md:text-5xl font-black text-white text-center px-8 leading-tight drop-shadow-lg">
CRAFTING MEMORIES THAT<br>LAST A LIFETIME
</h2>
</div>
<!-- Counter Block -->
<div class="relative rounded-3xl overflow-hidden h-32 flex items-center p-8 group">
<img class="absolute inset-0 w-full h-full object-cover grayscale opacity-30 group-hover:opacity-50 transition-opacity" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_a8a241e045_c175ede7204cb362.png" alt="aerial view of a cyclist traveling on a long straight desert road" />
<div class="absolute inset-0 bg-[#4a6b8a]/90"></div>
<div class="relative z-10 flex items-center justify-between w-full">
<div>
<span class="block text-white/60 text-xs font-bold uppercase tracking-[0.2em] mb-1">Guides Released</span>
<span class="text-4xl font-black text-white">1,248</span>
</div>
<i class="fa-solid fa-map-location-dot text-4xl text-white/20"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end cta -->
</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