Free
Demo
TrailBound Demo
A demo block extracted from the TrailBound template, available in Tailwind CSS and Bootstrap.
0
2
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 Demo | Tailwind CSS UI Block</title>
<meta name="description" content="A demo 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 demo -->
<section id="app-showcase" class="py-24 px-6 overflow-hidden">
<div class="max-w-7xl mx-auto relative">
<div class="flex flex-col lg:flex-row items-center gap-20">
<div class="w-full lg:w-1/2 z-10">
<h2 class="text-6xl md:text-8xl font-black leading-[0.9] tracking-tighter uppercase mb-8">
EXPLORE<br>EVERY PEAK
</h2>
<p class="text-xl text-gray-600 mb-10 max-w-md">
Unlock curated routes and real-time offline maps for the most remote outdoor destinations on earth.
</p>
<button class="bg-[#FF7A28] text-white px-8 py-4 rounded-full font-bold hover:bg-orange-600 transition-all mb-20">
View Route Guide
</button>
<!-- Stats -->
<div class="flex flex-wrap gap-12 items-center">
<div>
<div class="text-5xl font-black tracking-tighter">75%</div>
<div class="text-sm text-gray-500 font-medium mt-1">expert local guides</div>
</div>
<div class="w-px h-12 bg-gray-200"></div>
<div>
<div class="text-5xl font-black tracking-tighter">2.4K+</div>
<div class="text-sm text-gray-500 font-medium mt-1">active adventurers</div>
</div>
<div class="w-px h-12 bg-gray-200"></div>
<div>
<div class="text-5xl font-black tracking-tighter">300+</div>
<div class="text-sm text-gray-500 font-medium mt-1">mountain ranges</div>
</div>
</div>
</div>
<!-- App Mockups (Skeleton UI) -->
<div class="w-full lg:w-1/2 relative flex justify-center lg:justify-end">
<!-- Background Decorative Swirl -->
<svg class="absolute -z-10 top-0 right-0 w-[600px] h-[600px] text-orange-100 opacity-50" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M44.7,-76.4C58.1,-69.2,69.2,-58.1,76.4,-44.7C83.7,-31.3,87.1,-15.7,85.6,-0.9C84.1,13.9,77.7,27.7,69.2,40.1C60.7,52.5,50,63.4,37.3,71.1C24.6,78.8,12.3,83.3,-1.3,85.5C-14.8,87.7,-29.6,87.7,-43.5,81.4C-57.4,75.1,-70.4,62.5,-78.9,47.9C-87.4,33.3,-91.4,16.7,-91.4,0C-91.4,-16.7,-87.4,-33.3,-78.9,-47.9C-70.4,-62.5,-57.4,-75.1,-43.5,-81.4C-29.6,-87.7,-14.8,-87.7,-1.3,-85.5C12.3,-83.3,24.6,-78.8,37.3,-71.1C50,-63.4,60.7,-52.5,69.2,-40.1C77.7,-27.7,84.1,-13.9,85.6,0.9C87.1,15.7,83.7,31.3,76.4,44.7C69.2,58.1,58.1,69.2,44.7,76.4" transform="translate(100 100)" />
</svg>
<!-- Main Phone -->
<div class="relative w-[300px] h-[600px] bg-[#1a1a1a] rounded-[50px] border-[8px] border-gray-800 shadow-2xl overflow-hidden z-20 translate-y-10">
<div class="w-full h-full p-6 flex flex-col">
<div class="flex justify-between items-center mb-8">
<div class="text-white font-bold">Good morning</div>
<div class="w-10 h-10 rounded-full bg-gray-700"></div>
</div>
<div class="w-full h-12 bg-gray-800 rounded-xl mb-6"></div>
<div class="w-full flex-1 bg-gray-800 rounded-3xl p-4 flex flex-col gap-4">
<div class="w-full h-32 bg-gray-700 rounded-2xl"></div>
<div class="w-3/4 h-6 bg-gray-700 rounded-full"></div>
<div class="w-1/2 h-4 bg-gray-700 rounded-full"></div>
<div class="mt-auto w-full h-20 bg-[#FF7A28] rounded-2xl"></div>
</div>
</div>
</div>
<!-- Secondary Phone -->
<div class="absolute right-0 top-0 w-[260px] h-[520px] bg-[#1a1a1a] rounded-[45px] border-[6px] border-gray-800 shadow-xl overflow-hidden z-10 translate-x-12 -translate-y-8 opacity-90 hidden sm:block">
<div class="w-full h-full p-5 flex flex-col">
<div class="w-full h-full bg-gray-800 rounded-3xl flex flex-col p-4 gap-4">
<div class="flex gap-2">
<div class="w-12 h-12 bg-gray-700 rounded-xl"></div>
<div class="flex-1 space-y-2">
<div class="w-full h-3 bg-gray-700 rounded-full"></div>
<div class="w-2/3 h-3 bg-gray-700 rounded-full"></div>
</div>
</div>
<div class="flex-1 w-full bg-gray-700/50 rounded-2xl"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end demo -->
</body>
</html>
From this template
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