JourneyMuse Blog Blog Block - Let's templates
Unlock every premium block and template with All-Access from €20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Blog

JourneyMuse Blog

A blog block extracted from the JourneyMuse template, available in Tailwind CSS and Bootstrap.

0 2
Demo Download
JourneyMuse Blog preview
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 Blog | Tailwind CSS UI Block</title>
    <meta name="description" content="A blog 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 blog -->
    <section id="blog" class="px-4 sm:px-6 lg:px-8 py-16">
        <div class="max-w-7xl mx-auto">
            <div class="mb-12">
                <h2 class="text-4xl font-bold text-gray-900 mb-2">Our Journal</h2>
                <p class="text-gray-500 max-w-2xl">Fuel your wanderlust with curated stories, practical guides, and breathtaking snapshots from the most remarkable corners of the globe.</p>
            </div>

            <!-- Filters -->
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6 mb-12 border-b border-gray-200 pb-6">
                <div class="flex flex-wrap gap-2" aria-label="Filter journal posts">
                    <button type="button" data-blog-filter="all" aria-pressed="true" class="px-5 py-2 rounded-full bg-[#4a6b8a] text-white text-sm font-bold transition-colors">All</button>
                    <button type="button" data-blog-filter="destinations" aria-pressed="false" class="px-5 py-2 rounded-full hover:bg-gray-100 text-gray-600 text-sm font-medium transition-colors">Destinations</button>
                    <button type="button" data-blog-filter="gastronomy" aria-pressed="false" class="px-5 py-2 rounded-full hover:bg-gray-100 text-gray-600 text-sm font-medium transition-colors">Gastronomy</button>
                    <button type="button" data-blog-filter="lifestyle" aria-pressed="false" class="px-5 py-2 rounded-full hover:bg-gray-100 text-gray-600 text-sm font-medium transition-colors">Lifestyle</button>
                    <button type="button" data-blog-filter="travel-hacks" aria-pressed="false" class="px-5 py-2 rounded-full hover:bg-gray-100 text-gray-600 text-sm font-medium transition-colors">Travel Hacks</button>
                </div>
                <div class="flex items-center gap-3">
                    <span class="text-sm text-gray-400">Sort by:</span>
                    <button class="flex items-center gap-2 text-sm font-bold border border-gray-200 rounded-lg px-4 py-2 hover:bg-white transition-colors">
                        Latest First
                        <i class="fa-solid fa-chevron-down text-[10px]"></i>
                    </button>
                </div>
            </div>

            <!-- Grid -->
            <div data-blog-grid class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
                
                <!-- Card 1 -->
                <article data-blog-category="destinations">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3d8b989939_173ef9971ff06185.png" alt="serene lakeside mountain range reflecting in calm water, sunrise lighting" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">Nature</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 12, 2024 • 8 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">Chasing the Aurora: A Guide to Nordic Nights</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">Everything you need to know about witnessing the northern lights, from the best viewing spots to camera settings for perfect captures.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Elara Thorne</span>
                        </div>
                    </div>
                    </a>
                </article>

                <!-- Card 2 -->
                <article data-blog-category="gastronomy">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_267f86f764_73cd430d0dc6e00c.png" alt="busy mediterranean street market with colorful spices and textiles" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">Culture</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 10, 2024 • 15 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">The Spice Route: Flavors of the Mediterranean</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">Embark on a culinary journey across coastal markets, uncovering the ancient spices that define world-class Mediterranean cuisine.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Julian Cross</span>
                        </div>
                    </div>
                    </a>
                </article>

                <!-- Card 3 -->
                <article data-blog-category="lifestyle">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3aca99feb2_01c3ea07b2d524e0.png" alt="sleek digital nomad setup with laptop and coffee overlooking a tropical beach" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">Work/Life</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 08, 2024 • 10 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">Remote Freedom: Working from the Tropics</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">How to balance professional productivity with the ultimate island lifestyle. Tips on connectivity, community, and co-working spaces.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Sophia Lane</span>
                        </div>
                    </div>
                    </a>
                </article>

                <!-- Card 4 -->
                <article data-blog-category="travel-hacks">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_bf62e48b50_179e7dd367983ce4.png" alt="minimalist high-speed train cutting through a snowy mountain landscape" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">Transport</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 05, 2024 • 6 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">Slow Travel: The Magic of Rail Journeys</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">Rediscover the romance of the rails. Why taking the train is the best way to soak in the changing landscapes of continental Europe.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Leo Sterling</span>
                        </div>
                    </div>
                    </a>
                </article>

                <!-- Card 5 -->
                <article data-blog-category="travel-hacks">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_dd9cced0fe_082058f16dcadb4d.png" alt="organized travel backpack with camera gear and maps on a wooden floor" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">Hacks</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 03, 2024 • 12 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">Minimalist Packing for Global Adventures</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">The ultimate checklist for traveling light without missing the essentials. Master the art of the carry-on for any climate.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-6.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Mia Sato</span>
                        </div>
                    </div>
                    </a>
                </article>

                <!-- Card 6 -->
                <article data-blog-category="destinations">
                    <a href="blog-post.html" class="group block cursor-pointer">
                    <div class="relative rounded-2xl overflow-hidden mb-6 h-64">
                        <img class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_99ffee4161_0d36c38250d426a0.png" alt="ancient stone temple ruins overgrown with tropical vines in the jungle" />
                        <span class="absolute top-4 left-4 px-3 py-1 bg-white/20 backdrop-blur-md rounded-full text-white text-[10px] font-bold uppercase tracking-wider">History</span>
                    </div>
                    <div class="space-y-3">
                        <div class="text-xs font-semibold text-gray-400">Oct 01, 2024 • 20 mins read</div>
                        <h3 class="text-xl font-bold leading-tight group-hover:text-[#4a6b8a] transition-colors">Echoes of the Past: Forgotten Jungle Cities</h3>
                        <p class="text-gray-500 text-sm line-clamp-2">Deep inside the rainforests of Southeast Asia lie ruins that tell stories of civilizations lost to time. A trek into history.</p>
                        <div class="flex items-center gap-3 pt-2">
                            <img class="w-8 h-8 rounded-full" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-7.jpg" alt="Author" />
                            <span class="text-sm font-semibold text-gray-700">Oliver West</span>
                        </div>
                    </div>
                    </a>
                </article>

            </div>

            <!-- Pagination -->
            <div class="mt-16 flex justify-center">
                <div class="flex items-center gap-2">
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
                        <i class="fa-solid fa-chevron-left text-sm"></i>
                    </button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#4a6b8a] text-white font-bold">1</button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">2</button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">3</button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">4</button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">5</button>
                    <button class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-100 transition-colors">
                        <i class="fa-solid fa-chevron-right text-sm"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- block:end blog -->
<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

JourneyMuse screenshot 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