Free
0
57
PayEngine
PayEngine is a modern fintech template for global payouts, intelligent ledger technology, payment compliance, reporting, and financial infrastructure platforms.
Download Codebase
Commercial License<!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>PayEngine | Tailwind CSS Fintech Payments Template</title>
<meta name="description" content="PayEngine is a modern Tailwind CSS fintech template for global payouts, intelligent ledger technology, payment compliance, reporting, and financial infrastructure platforms.">
<meta name="keywords" content="PayEngine, Tailwind CSS template, HTML website template, fintech website template, payout platform landing page, global payments, financial infrastructure, responsive fintech 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="PayEngine | Tailwind CSS Fintech Payments Template">
<meta property="og:description" content="A modern Tailwind CSS fintech template for global payouts, intelligent ledger technology, payment compliance, reporting, and financial infrastructure platforms.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="PayEngine template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="PayEngine | Tailwind CSS Fintech Payments Template">
<meta name="twitter:description" content="A modern Tailwind CSS fintech template for global payouts, intelligent ledger technology, payment compliance, reporting, and financial infrastructure platforms.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="PayEngine template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #000000;
}
</style>
</head>
<body class="text-white selection:bg-white selection:text-black">
<!-- block:start navbar -->
<header id="header" class="fixed top-0 left-0 w-full z-50 bg-black/80 backdrop-blur-md border-b border-white/5">
<div class="max-w-7xl mx-auto px-4 sm:px-6 h-20 flex items-center justify-between gap-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-white flex items-center justify-center rounded-sm">
<div class="w-4 h-4 bg-black rotate-45"></div>
</div>
<span class="text-xl font-bold tracking-tight">PayEngine</span>
</div>
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-white/60">
<a href="#" class="hover:text-white transition-colors">Infrastructure</a>
<a href="#" class="hover:text-white transition-colors">Solutions</a>
<a href="#" class="hover:text-white transition-colors">API Docs</a>
<a href="#" class="hover:text-white transition-colors">Ecosystem</a>
<a href="#" class="hover:text-white transition-colors">Company</a>
</nav>
<div class="flex shrink-0 items-center gap-4">
<a href="#" class="hidden sm:inline text-sm font-medium hover:text-white/80 transition-colors">Login</a>
<a href="#" class="bg-white text-black px-4 sm:px-5 py-2.5 rounded-md text-sm font-bold hover:bg-white/90 transition-all whitespace-nowrap">
<span class="sm:hidden">Demo</span>
<span class="hidden sm:inline">Schedule a Demo</span>
</a>
</div>
</div>
</header>
<!-- block:end navbar -->
<main class="pt-20">
<!-- block:start hero -->
<section id="hero" class="py-20 md:py-24 flex flex-col items-center text-center px-6">
<div class="inline-block px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] uppercase tracking-[0.2em] font-bold text-white/40 mb-10">
Our Vision
</div>
<h1 class="text-5xl md:text-7xl font-medium tracking-tight max-w-4xl leading-[1.1] mb-12">
The Payout Infrastructure<br>for Modern Business
</h1>
<button class="bg-white text-black px-8 py-4 rounded-md font-bold hover:bg-white/90 transition-all">
Explore the Platform
</button>
</section>
<!-- block:end hero -->
<!-- block:start about -->
<section id="statement" class="max-w-7xl mx-auto px-6 py-12 md:py-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-32 items-start">
<div class="space-y-8">
<div class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/40">
A Note from Our Founder
</div>
<h2 class="text-3xl md:text-4xl font-medium leading-snug">
Empowering financial teams with agility, precision, and total transparency — giving payees a superior experience.
</h2>
</div>
<div class="space-y-8 text-lg text-white/60 font-light leading-relaxed">
<p>
At PayEngine, we are engineering an intelligent ledger and contemporary rails for high-volume disbursements. For many organizations, managing thousands of external payments is still a manual, opaque, and high-risk process.
</p>
<p>
Current payout workflows are often sluggish and disconnected. PayEngine unifies compliance, speed, and reporting into a single, robust layer. We believe money should move as fast as ideas, ensuring every transaction is as effortless as it is secure.
</p>
<div class="pt-4">
<div class="text-white font-medium">Arthur Sterling</div>
<div class="text-white/40 text-sm">Founder & CEO</div>
</div>
</div>
</div>
</section>
<!-- block:end about -->
<!-- block:start clients -->
<section id="companies" class="pb-32 px-6">
<div class="max-w-7xl mx-auto border-t border-b border-white/5 py-12">
<div class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/20 text-center mb-12">
Trusted by industry leaders
</div>
<div class="flex flex-wrap justify-center items-center gap-12 md:gap-24 opacity-40 grayscale">
<div class="flex items-center gap-2">
<i class="fa-solid fa-cube text-xl"></i>
<span class="text-lg font-bold tracking-tighter">QUANTUM</span>
</div>
<div class="flex items-center gap-2">
<i class="fa-solid fa-terminal text-xl"></i>
<span class="text-lg font-bold tracking-tighter">SYNTAX</span>
</div>
<div class="flex items-center gap-2">
<i class="fa-solid fa-shield-halved text-xl"></i>
<span class="text-lg font-bold tracking-tighter">SECURE</span>
</div>
<div class="flex items-center gap-2">
<i class="fa-solid fa-bolt text-xl"></i>
<span class="text-lg font-bold tracking-tighter">VOLT</span>
</div>
<div class="flex items-center gap-2">
<i class="fa-solid fa-network-wired text-xl"></i>
<span class="text-lg font-bold tracking-tighter">NEXUS</span>
</div>
</div>
</div>
</section>
<!-- block:end clients -->
<!-- block:start gallery -->
<section id="image" class="px-6 mb-32">
<div class="max-w-7xl mx-auto rounded-xl overflow-hidden grayscale brightness-90 hover:grayscale-0 transition-all duration-700">
<img class="w-full h-[500px] md:h-[700px] object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_5739498206_5d9e3b3f93632516.png" alt="modern creative workspace with a team collaborating in a minimalist high-tech office, cinematic ligh" />
</div>
</section>
<!-- block:end gallery -->
<!-- block:start features -->
<section id="features" class="max-w-7xl mx-auto px-6 py-32 border-t border-white/5">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="space-y-6">
<div class="w-10 h-10 border border-white/10 flex items-center justify-center rounded-sm">
<i class="fa-solid fa-microchip text-sm text-white/40"></i>
</div>
<h4 class="text-xl font-medium">Smart Ledger</h4>
<p class="text-white/40 text-sm leading-relaxed">Automated transaction matching and real-time balance reconciliation across multiple jurisdictions.</p>
</div>
<div class="space-y-6">
<div class="w-10 h-10 border border-white/10 flex items-center justify-center rounded-sm">
<i class="fa-solid fa-earth-americas text-sm text-white/40"></i>
</div>
<h4 class="text-xl font-medium">Global Disbursements</h4>
<p class="text-white/40 text-sm leading-relaxed">Reach over 150 countries with local rails, minimizing fees and maximizing transfer speed.</p>
</div>
<div class="space-y-6">
<div class="w-10 h-10 border border-white/10 flex items-center justify-center rounded-sm">
<i class="fa-solid fa-shield-check text-sm text-white/40"></i>
</div>
<h4 class="text-xl font-medium">Built-in Compliance</h4>
<p class="text-white/40 text-sm leading-relaxed">Dynamic KYC/KYB workflows and automated sanctions screening integrated into every payout.</p>
</div>
</div>
</section>
<!-- block:end features -->
<!-- block:start pricing -->
<section id="pricing" class="max-w-7xl mx-auto px-6 py-32 border-t border-white/5">
<div class="mb-20">
<div class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/40 mb-6">Pricing Plans</div>
<h2 class="text-3xl md:text-4xl font-medium">Scaling with your growth</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="p-8 border border-white/5 bg-white/[0.02] rounded-lg space-y-8">
<div>
<div class="text-sm font-medium mb-2">Startup</div>
<div class="text-3xl font-medium">$499<span class="text-sm text-white/40 font-normal">/mo</span></div>
</div>
<ul class="space-y-4 text-sm text-white/40">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Up to 1k payouts/mo</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Basic reporting</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Email support</li>
</ul>
<button class="w-full py-3 border border-white/10 rounded-md text-sm font-bold hover:bg-white/5 transition-all">Get Started</button>
</div>
<div class="p-8 border border-white/20 bg-white/[0.05] rounded-lg space-y-8 relative">
<div class="absolute -top-3 left-8 px-3 py-1 bg-white text-black text-[10px] font-bold uppercase tracking-wider rounded-sm">Most Popular</div>
<div>
<div class="text-sm font-medium mb-2">Enterprise</div>
<div class="text-3xl font-medium">$1,999<span class="text-sm text-white/40 font-normal">/mo</span></div>
</div>
<ul class="space-y-4 text-sm text-white/40">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Up to 10k payouts/mo</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Advanced analytics</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Priority 24/7 support</li>
</ul>
<button class="w-full py-3 bg-white text-black rounded-md text-sm font-bold hover:bg-white/90 transition-all">Select Plan</button>
</div>
<div class="p-8 border border-white/5 bg-white/[0.02] rounded-lg space-y-8">
<div>
<div class="text-sm font-medium mb-2">Custom</div>
<div class="text-3xl font-medium">Talk to Sales</div>
</div>
<ul class="space-y-4 text-sm text-white/40">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Unlimited volume</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Custom integrations</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-[10px] text-white"></i> Dedicated manager</li>
</ul>
<button class="w-full py-3 border border-white/10 rounded-md text-sm font-bold hover:bg-white/5 transition-all">Contact Us</button>
</div>
</div>
</section>
<!-- block:end pricing -->
<!-- block:start contact -->
<section id="contact" class="max-w-7xl mx-auto px-6 py-32 border-t border-white/5">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-32">
<div class="space-y-12">
<div class="space-y-6">
<div class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/40">Get in touch</div>
<h2 class="text-4xl md:text-5xl font-medium tracking-tight">Let's build the future of payouts together.</h2>
<p class="text-white/40 leading-relaxed max-w-md">
Whether you're looking for enterprise solutions or developer support, our team is ready to help you scale.
</p>
</div>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-white/20 font-bold">Full Name</label>
<input type="text" class="w-full bg-white/5 border border-white/10 rounded-md px-4 py-3 text-sm focus:outline-none focus:border-white/40 transition-colors" placeholder="Jane Doe">
</div>
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-white/20 font-bold">Work Email</label>
<input type="email" class="w-full bg-white/5 border border-white/10 rounded-md px-4 py-3 text-sm focus:outline-none focus:border-white/40 transition-colors" placeholder="jane@company.com">
</div>
</div>
<div class="space-y-2">
<label class="text-[10px] uppercase tracking-widest text-white/20 font-bold">Message</label>
<textarea rows="4" class="w-full bg-white/5 border border-white/10 rounded-md px-4 py-3 text-sm focus:outline-none focus:border-white/40 transition-colors resize-none" placeholder="How can we help?"></textarea>
</div>
<button class="bg-white text-black px-8 py-3 rounded-md text-sm font-bold hover:bg-white/90 transition-all w-full md:w-auto">Send Message</button>
</form>
</div>
<div class="flex flex-col">
<div class="rounded-xl overflow-hidden grayscale border border-white/10 relative flex-grow min-h-[400px]">
<img class="w-full h-full object-cover opacity-40" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_4536e8fa88_9a23fc70945d3c6e.png" alt="highly minimalist stylized map of New York City financial district, monochrome black and white, clea" />
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div>
<div class="absolute bottom-8 left-8 right-8 space-y-6">
<div>
<div class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/40 mb-2">Headquarters</div>
<div class="text-xl font-medium leading-tight text-white">451 Wall Street, 12th Floor<br>New York, NY 10005</div>
</div>
<div class="flex flex-wrap gap-x-8 gap-y-4 pt-4 border-t border-white/10">
<div class="flex flex-col">
<span class="text-white text-xs font-medium tracking-tight">New York</span>
<span class="text-white/20 text-[10px] font-bold uppercase tracking-wider">Global HQ</span>
</div>
<div class="flex flex-col">
<span class="text-white text-xs font-medium tracking-tight">London</span>
<span class="text-white/20 text-[10px] font-bold uppercase tracking-wider">Operations</span>
</div>
<div class="flex flex-col">
<span class="text-white text-xs font-medium tracking-tight">Singapore</span>
<span class="text-white/20 text-[10px] font-bold uppercase tracking-wider">APAC Hub</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end contact -->
<!-- block:start about-2 -->
<section id="mission" class="max-w-4xl mx-auto px-6 py-32 md:py-48 text-center">
<h3 class="text-3xl md:text-5xl font-medium leading-[1.3] tracking-tight">
We are committed to reinventing how the world settles accounts — bridging the gap between global enterprises and their partners through a secure, instantaneous, and friction-free payment ecosystem.
</h3>
</section>
<!-- block:end about-2 -->
</main>
<!-- block:start footer -->
<footer id="footer" class="border-t border-white/5 py-20 px-6">
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12 text-sm">
<div class="col-span-2 lg:col-span-1">
<div class="flex items-center gap-2 mb-6">
<div class="w-6 h-6 bg-white flex items-center justify-center rounded-sm">
<div class="w-3 h-3 bg-black rotate-45"></div>
</div>
<span class="text-lg font-bold">PayEngine</span>
</div>
<p class="text-white/40 leading-relaxed max-w-[200px]">
Reimagining the movement of capital for the digital age.
</p>
</div>
<div class="space-y-4">
<div class="font-bold mb-6">Product</div>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Payouts</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Compliance</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Global Ledger</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Reporting</a>
</div>
<div class="space-y-4">
<div class="font-bold mb-6">Developers</div>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Documentation</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">API Reference</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Changelog</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Status</a>
</div>
<div class="space-y-4">
<div class="font-bold mb-6">Company</div>
<a href="#" class="block text-white/40 hover:text-white transition-colors">About</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Careers</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Contact</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Security</a>
</div>
<div class="space-y-4">
<div class="font-bold mb-6">Legal</div>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Privacy</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Terms</a>
<a href="#" class="block text-white/40 hover:text-white transition-colors">Cookies</a>
</div>
</div>
<div class="max-w-7xl mx-auto mt-20 pt-8 border-t border-white/5 flex flex-col md:row justify-between items-center gap-4 text-xs text-white/20 uppercase tracking-widest font-bold">
<div>© 2024 PayEngine Inc. All Rights Reserved.</div>
<div class="flex gap-8">
<a href="#" class="hover:text-white/60 transition-colors">Twitter</a>
<a href="#" class="hover:text-white/60 transition-colors">LinkedIn</a>
<a href="#" class="hover:text-white/60 transition-colors">GitHub</a>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
