TrailBound Features Features 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 Features

TrailBound Features

A features block extracted from the TrailBound template, available in Tailwind CSS and Bootstrap.

0 1
Demo Download
TrailBound Features preview
trailbound.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>TrailBound Features | Tailwind CSS UI Block</title>
    <meta name="description" content="A features block extracted from the TrailBound template, available in Tailwind CSS and Bootstrap.">
    <meta name="keywords" content="TrailBound, Tailwind CSS template, HTML website template, hiking app landing page, offline trail maps, GPS route planner, responsive outdoor 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="TrailBound | Tailwind CSS Hiking App Template">
    <meta property="og:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="TrailBound template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="TrailBound | Tailwind CSS Hiking App Template">
    <meta name="twitter:description" content="An adventurous Tailwind CSS hiking app template for outdoor explorers, offline trail maps, route planning, and GPS tracking products.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="TrailBound 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@400;500;700;900&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-white text-[#111111]">
<!-- block:start features -->
    <section id="values" class="py-24 px-6 bg-white">
        <div class="max-w-7xl mx-auto">
            <div class="flex flex-col lg:flex-row justify-between items-start gap-8 mb-20">
                <h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase">
                    OUR GUIDING<br>VALUES
                </h2>
                <p class="text-gray-500 font-medium max-w-sm pt-4 leading-relaxed">
                    At TrailBound, our values guide every step of your journey. From safety and trust to adventure and discovery, we're committed to creating experiences that inspire and connect you with the world around you.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Value Card 1 -->
                <div class="group">
                    <div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5ffeab8f2f_70cb81a54edb5441.png" alt="hiker on a rocky ridge pointing towards a distant peak, adventure planning, rugged terrain" />
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Route planning</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Explore detailed trail information, terrain profiles, and difficulty ratings, so you can plan your next adventure with complete precision.
                    </p>
                </div>
                <!-- Value Card 2 -->
                <div class="group">
                    <div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_fb21c24882_377d7df20b9198a4.png" alt="back view of a solo female hiker looking at a vast desert landscape, wearing a backpack, track recor" />
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">Track recording</h3>
                    <p class="text-gray-600 leading-relaxed">
                        The track recorder allows you to record GPS locations at regular intervals along your path, ensuring you never lose your way in the wild.
                    </p>
                </div>
                <!-- Value Card 3 -->
                <div class="group">
                    <div class="rounded-[40px] overflow-hidden mb-8 h-[400px] shadow-lg">
                        <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_70124a0610_3a22a30dd9d8500d.png" alt="hiker walking on a bright orange sandstone ridge, clear blue sky, 3d route preview visual" />
                    </div>
                    <h3 class="text-3xl font-black uppercase tracking-tighter mb-4">3D route preview</h3>
                    <p class="text-gray-600 leading-relaxed">
                        The 3D Preview is a 3D map-based feature on our platform, which gives you a clear visual understanding of the elevation and terrain ahead.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- block:end features -->
</body>
</html>

From this template

TrailBound screenshot Free

Travel

TrailBound

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