Free
Reviews
TrailBound Reviews
A reviews 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 Reviews | Tailwind CSS UI Block</title>
<meta name="description" content="A reviews 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 reviews -->
<section id="reviews" class="py-12 px-6">
<div class="max-w-7xl mx-auto">
<div class="relative w-full h-[500px] rounded-[48px] overflow-hidden flex items-center px-12 md:px-24">
<!-- Background Image -->
<div class="absolute inset-0 -z-10">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_804213375b_bbf6e88ad1a0f8b6.png" alt="wide angle view of the Grand Canyon during daylight, bright blue sky, rugged orange rock formations" />
<div class="absolute inset-0 bg-black/10"></div>
</div>
<div class="max-w-2xl">
<h2 class="text-5xl md:text-7xl font-black text-white leading-[0.9] tracking-tighter uppercase mb-10">
SEE REVIEWS<br>OF TRAILBOUND APP
</h2>
<button class="bg-[#FF7A28] text-white px-10 py-4 rounded-full font-bold hover:bg-orange-600 transition-all">
See all reviews
</button>
</div>
<!-- Glassmorphism Review Cards -->
<div class="absolute right-12 md:right-24 top-20 flex flex-col gap-6 hidden lg:flex">
<!-- Review 1 -->
<div class="bg-white/20 backdrop-blur-xl border border-white/30 rounded-3xl p-5 flex items-center gap-4 w-72 shadow-2xl">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-12 h-12 rounded-full border-2 border-orange-400" alt="Nellie Russell">
<div>
<p class="text-white font-bold text-sm">Nellie Russell</p>
<div class="flex text-orange-400 text-[10px] mt-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
<span class="text-white/70 ml-2">5.0</span>
</div>
</div>
</div>
<!-- Review 2 -->
<div class="bg-white/20 backdrop-blur-xl border border-white/30 rounded-3xl p-5 flex items-center gap-4 w-72 shadow-2xl translate-x-12">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-12 h-12 rounded-full border-2 border-orange-400" alt="Rory Todd">
<div>
<p class="text-white font-bold text-sm">Rory Todd</p>
<div class="flex text-orange-400 text-[10px] mt-1">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star-half-stroke"></i>
<span class="text-white/70 ml-2">4.9</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews -->
</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