Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/ceo-landing.html

Created February 5, 2026 08:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aseba/da3c892c89088b6bf4b5ca209ff34173 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aseba/da3c892c89088b6bf4b5ca209ff34173 to your computer and use it in GitHub Desktop.
Download ZIP
BairesDev Landing Pages v3 - Toptal Alternative Template
Raw
ceo-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remotely Works, the best BairesDev alternative</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#8B5CF6',
'remotely-pink': '#F9A8D4',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #F3E8FF 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</div>
<a href="#cta" class="border border-gray-300 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-16 pb-24">
<div class="max-w-4xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600 text-center mb-10">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
<!-- Tabs -->
<div class="flex justify-center gap-2 mb-10">
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition">
💰 Pricing Transparency
</button>
<button onclick="showTab('quality')" id="tab-quality" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
⚡ Speed & Quality
</button>
<button onclick="showTab('integration')" id="tab-integration" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
🤝 Team Integration
</button>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<!-- BairesDev Column -->
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Hidden markup (~70%)</strong>
<p class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>45-hour billing</strong>
<p class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40 (hidden 12.5% fee)</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>No compensation control</strong>
<p class="text-gray-500 text-sm">Can't give raises or bonuses directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Can't offer equity</strong>
<p class="text-gray-500 text-sm">Engineers can't participate in your upside</p>
</div>
</li>
</ul>
</div>
<!-- Remotely Column -->
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>100% transparent pricing</strong>
<p class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>$2K/month platform fee (separate from salary)</strong>
<p class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Full compensation control</strong>
<p class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Grant equity</strong>
<p class="text-gray-500 text-sm">Make engineers true stakeholders like employees</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Quality -->
<div id="content-quality" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>"Top 1%" marketing claim</strong>
<p class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>4,000 developer bench</strong>
<p class="text-gray-500 text-sm">Quantity over quality, high variance</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Project hopping</strong>
<p class="text-gray-500 text-sm">Engineers moved between clients frequently</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Rigorous vetting (top 33% of agency talent)</strong>
<p class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>5,800+ senior engineers</strong>
<p class="text-gray-500 text-sm">10+ years average experience, startup-ready</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Long-term engagements</strong>
<p class="text-gray-500 text-sm">Engineers stay because they're treated like owners</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Integration -->
<div id="content-integration" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Arm's length relationship</strong>
<p class="text-gray-500 text-sm">Engineers work for agency, not you</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Buyout fees</strong>
<p class="text-gray-500 text-sm">3-6 month salary to hire direct</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Vendor lock-in</strong>
<p class="text-gray-500 text-sm">Designed to keep you dependent</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Direct relationship</strong>
<p class="text-gray-500 text-sm">Engineers in your Slack, standups, team</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>No buyout fees</strong>
<p class="text-gray-500 text-sm">Hire direct after 12 months, no charge</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Freedom to transition</strong>
<p class="text-gray-500 text-sm">Move to your payroll whenever ready</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<p class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
<span class="text-gray-400 font-semibold text-lg">Preset</span>
<span class="text-gray-400 font-semibold text-lg">character.ai</span>
<span class="text-gray-400 font-semibold text-lg">Bluecore</span>
<span class="text-gray-400 font-semibold text-lg">Aura</span>
<span class="text-gray-400 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-16 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>How are we different from BairesDev's model?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">BairesDev takes a 50-70% margin on every developer. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What makes Remotely more cost-effective?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Can I really offer equity to engineers?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. Our engineers can receive equity, bonuses, and raises directly from you. This creates true alignment—they think and act like owners because they are.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What if I need someone urgently?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Our average time to first hire is 2 weeks. We have 5,800+ pre-vetted engineers ready to match with your tech stack and team culture.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Do engineers work during US hours?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. All our LATAM engineers work timezone-aligned with US teams. Same working hours, real-time collaboration, no async delays.</p>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="bg-gray-900 text-white py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-8">
Get started building your engineering team with Remotely.<br>
Grab time for a quick demo, or simply send a note to<br>
<a href="mailto:contact@remotely.works" class="text-white underline">contact@remotely.works</a>
</p>
<a href="https://remotely.works/demo" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Schedule a Demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<svg class="w-6 h-6" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-white font-medium">Remotely</span>
</div>
<div class="flex gap-6 text-sm">
<a href="#" class="hover:text-white">Privacy</a>
<a href="#" class="hover:text-white">Terms</a>
<a href="#" class="hover:text-white">Cookie Policy</a>
<a href="#" class="hover:text-white">About Us</a>
</div>
</div>
</footer>
<script>
function showTab(tab) {
// Hide all content
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
// Show selected content
document.getElementById('content-' + tab).classList.remove('hidden');
// Update tab styles
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</script>
</body>
</html>
Raw
cfo-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remotely Works, the best BairesDev alternative</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#8B5CF6',
'remotely-pink': '#F9A8D4',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #F3E8FF 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</div>
<a href="#cta" class="border border-gray-300 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-16 pb-24">
<div class="max-w-4xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600 text-center mb-10">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
<!-- Tabs -->
<div class="flex justify-center gap-2 mb-10">
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition">
💰 Pricing Transparency
</button>
<button onclick="showTab('quality')" id="tab-quality" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
⚡ Speed & Quality
</button>
<button onclick="showTab('integration')" id="tab-integration" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
🤝 Team Integration
</button>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<!-- BairesDev Column -->
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Hidden markup (~70%)</strong>
<p class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>45-hour billing</strong>
<p class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40 (hidden 12.5% fee)</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>No compensation control</strong>
<p class="text-gray-500 text-sm">Can't give raises or bonuses directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Can't offer equity</strong>
<p class="text-gray-500 text-sm">Engineers can't participate in your upside</p>
</div>
</li>
</ul>
</div>
<!-- Remotely Column -->
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>100% transparent pricing</strong>
<p class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>$2K/month platform fee (separate from salary)</strong>
<p class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Full compensation control</strong>
<p class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Grant equity</strong>
<p class="text-gray-500 text-sm">Make engineers true stakeholders like employees</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Quality -->
<div id="content-quality" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>"Top 1%" marketing claim</strong>
<p class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>4,000 developer bench</strong>
<p class="text-gray-500 text-sm">Quantity over quality, high variance</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Project hopping</strong>
<p class="text-gray-500 text-sm">Engineers moved between clients frequently</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Rigorous vetting (top 33% of agency talent)</strong>
<p class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>5,800+ senior engineers</strong>
<p class="text-gray-500 text-sm">10+ years average experience, startup-ready</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Long-term engagements</strong>
<p class="text-gray-500 text-sm">Engineers stay because they're treated like owners</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Integration -->
<div id="content-integration" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Arm's length relationship</strong>
<p class="text-gray-500 text-sm">Engineers work for agency, not you</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Buyout fees</strong>
<p class="text-gray-500 text-sm">3-6 month salary to hire direct</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Vendor lock-in</strong>
<p class="text-gray-500 text-sm">Designed to keep you dependent</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Direct relationship</strong>
<p class="text-gray-500 text-sm">Engineers in your Slack, standups, team</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>No buyout fees</strong>
<p class="text-gray-500 text-sm">Hire direct after 12 months, no charge</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Freedom to transition</strong>
<p class="text-gray-500 text-sm">Move to your payroll whenever ready</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<p class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
<span class="text-gray-400 font-semibold text-lg">Preset</span>
<span class="text-gray-400 font-semibold text-lg">character.ai</span>
<span class="text-gray-400 font-semibold text-lg">Bluecore</span>
<span class="text-gray-400 font-semibold text-lg">Aura</span>
<span class="text-gray-400 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-16 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>How are we different from BairesDev's model?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">BairesDev takes a 50-70% margin on every developer. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What makes Remotely more cost-effective?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Can I really offer equity to engineers?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. Our engineers can receive equity, bonuses, and raises directly from you. This creates true alignment—they think and act like owners because they are.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What if I need someone urgently?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Our average time to first hire is 2 weeks. We have 5,800+ pre-vetted engineers ready to match with your tech stack and team culture.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Do engineers work during US hours?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. All our LATAM engineers work timezone-aligned with US teams. Same working hours, real-time collaboration, no async delays.</p>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="bg-gray-900 text-white py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-8">
Get started building your engineering team with Remotely.<br>
Grab time for a quick demo, or simply send a note to<br>
<a href="mailto:contact@remotely.works" class="text-white underline">contact@remotely.works</a>
</p>
<a href="https://remotely.works/demo" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Schedule a Demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<svg class="w-6 h-6" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-white font-medium">Remotely</span>
</div>
<div class="flex gap-6 text-sm">
<a href="#" class="hover:text-white">Privacy</a>
<a href="#" class="hover:text-white">Terms</a>
<a href="#" class="hover:text-white">Cookie Policy</a>
<a href="#" class="hover:text-white">About Us</a>
</div>
</div>
</footer>
<script>
function showTab(tab) {
// Hide all content
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
// Show selected content
document.getElementById('content-' + tab).classList.remove('hidden');
// Update tab styles
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</script>
</body>
</html>
Raw
cto-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remotely Works, the best BairesDev alternative</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#8B5CF6',
'remotely-pink': '#F9A8D4',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #F3E8FF 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</div>
<a href="#cta" class="border border-gray-300 px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-16 pb-24">
<div class="max-w-4xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-16 px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600 text-center mb-10">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
<!-- Tabs -->
<div class="flex justify-center gap-2 mb-10">
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition">
💰 Pricing Transparency
</button>
<button onclick="showTab('quality')" id="tab-quality" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
⚡ Speed & Quality
</button>
<button onclick="showTab('integration')" id="tab-integration" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition">
🤝 Team Integration
</button>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<!-- BairesDev Column -->
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Hidden markup (~70%)</strong>
<p class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>45-hour billing</strong>
<p class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40 (hidden 12.5% fee)</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>No compensation control</strong>
<p class="text-gray-500 text-sm">Can't give raises or bonuses directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Can't offer equity</strong>
<p class="text-gray-500 text-sm">Engineers can't participate in your upside</p>
</div>
</li>
</ul>
</div>
<!-- Remotely Column -->
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>100% transparent pricing</strong>
<p class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>$2K/month platform fee (separate from salary)</strong>
<p class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Full compensation control</strong>
<p class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Grant equity</strong>
<p class="text-gray-500 text-sm">Make engineers true stakeholders like employees</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Quality -->
<div id="content-quality" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>"Top 1%" marketing claim</strong>
<p class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>4,000 developer bench</strong>
<p class="text-gray-500 text-sm">Quantity over quality, high variance</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Project hopping</strong>
<p class="text-gray-500 text-sm">Engineers moved between clients frequently</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Rigorous vetting (top 33% of agency talent)</strong>
<p class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>5,800+ senior engineers</strong>
<p class="text-gray-500 text-sm">10+ years average experience, startup-ready</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Long-term engagements</strong>
<p class="text-gray-500 text-sm">Engineers stay because they're treated like owners</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tab Content: Integration -->
<div id="content-integration" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<div class="text-gray-500 font-medium mb-6">BairesDev</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Arm's length relationship</strong>
<p class="text-gray-500 text-sm">Engineers work for agency, not you</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Buyout fees</strong>
<p class="text-gray-500 text-sm">3-6 month salary to hire direct</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-0.5">✕</span>
<div>
<strong>Vendor lock-in</strong>
<p class="text-gray-500 text-sm">Designed to keep you dependent</p>
</div>
</li>
</ul>
</div>
<div class="bg-purple-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full">
Built for startups
</div>
<div class="text-remotely-purple font-medium mb-6">Remotely</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Direct relationship</strong>
<p class="text-gray-500 text-sm">Engineers in your Slack, standups, team</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>No buyout fees</strong>
<p class="text-gray-500 text-sm">Hire direct after 12 months, no charge</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-0.5">✓</span>
<div>
<strong>Freedom to transition</strong>
<p class="text-gray-500 text-sm">Move to your payroll whenever ready</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="#cta" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<p class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
<span class="text-gray-400 font-semibold text-lg">Preset</span>
<span class="text-gray-400 font-semibold text-lg">character.ai</span>
<span class="text-gray-400 font-semibold text-lg">Bluecore</span>
<span class="text-gray-400 font-semibold text-lg">Aura</span>
<span class="text-gray-400 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-16 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>How are we different from BairesDev's model?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">BairesDev takes a 50-70% margin on every developer. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What makes Remotely more cost-effective?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Can I really offer equity to engineers?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. Our engineers can receive equity, bonuses, and raises directly from you. This creates true alignment—they think and act like owners because they are.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>What if I need someone urgently?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Our average time to first hire is 2 weeks. We have 5,800+ pre-vetted engineers ready to match with your tech stack and team culture.</p>
</details>
<details class="bg-white rounded-xl p-6 cursor-pointer group">
<summary class="flex justify-between items-center font-semibold">
<span>Do engineers work during US hours?</span>
<span class="text-2xl text-gray-400 group-open:rotate-45 transition-transform">+</span>
</summary>
<p class="mt-4 text-gray-600">Yes. All our LATAM engineers work timezone-aligned with US teams. Same working hours, real-time collaboration, no async delays.</p>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="bg-gray-900 text-white py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-8">
Get started building your engineering team with Remotely.<br>
Grab time for a quick demo, or simply send a note to<br>
<a href="mailto:contact@remotely.works" class="text-white underline">contact@remotely.works</a>
</p>
<a href="https://remotely.works/demo" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Schedule a Demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<svg class="w-6 h-6" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-white font-medium">Remotely</span>
</div>
<div class="flex gap-6 text-sm">
<a href="#" class="hover:text-white">Privacy</a>
<a href="#" class="hover:text-white">Terms</a>
<a href="#" class="hover:text-white">Cookie Policy</a>
<a href="#" class="hover:text-white">About Us</a>
</div>
</div>
</footer>
<script>
function showTab(tab) {
// Hide all content
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
// Show selected content
document.getElementById('content-' + tab).classList.remove('hidden');
// Update tab styles
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment