dashboard crm pipeline kanban sales deals modern
Dashboard CRM
CRM dashboard with Kanban-style pipeline view, deal cards, and sales statistics.
modern Responsive
Live Preview
Sections
sidebarheaderstatspipeline-columns
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DealFlow — CRM Dashboard</title>
<meta name="description" content="CRM dashboard with pipeline view, deal cards, and top-line stats." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<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@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — violet CRM identity */
:root {
--color-primary: #7c3aed;
--color-primary-hover: #6d28d9;
--color-primary-soft: #f5f3ff;
--color-primary-text: #ffffff;
}
/* interactions/hover-lift — applied to deal cards */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* interactions/scrollbar */
.custom-scrollbar {
--scrollbar-width: 0.5rem;
--scrollbar-track: oklch(0.95 0 0);
--scrollbar-thumb: oklch(0.75 0 0);
--scrollbar-thumb-hover: oklch(0.55 0 0);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
.custom-scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
</style>
</head>
<body class="bg-gray-50 text-gray-900 antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="ws-sidebar hidden lg:flex lg:flex-col w-60 bg-white border-r border-gray-200">
<div class="flex items-center gap-2 h-16 px-5 border-b border-gray-200">
<svg class="w-7 h-7" style="color: var(--color-primary);" viewBox="0 0 28 28" fill="none" aria-hidden="true"><rect width="28" height="28" rx="6" fill="currentColor"/><path d="M9 14l3 3 7-7" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="text-base font-bold text-gray-900">DealFlow</span>
</div>
<nav class="flex-1 px-3 py-5 space-y-1" aria-label="CRM navigation">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg" style="background-color: var(--color-primary-soft); color: var(--color-primary);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/></svg>
Pipeline
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
Contacts
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
Companies
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
Tasks
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6m6 0h6m-6 0V5a2 2 0 012-2h2a2 2 0 012 2v14"/></svg>
Reports
</a>
</nav>
</aside>
<!-- Main -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="ws-navbar flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
<h1 class="text-lg font-semibold text-gray-900">Sales Pipeline</h1>
<div class="flex items-center gap-3">
<button class="px-4 py-2 text-sm font-semibold text-white rounded-lg shadow-sm hover:opacity-90 transition-opacity" style="background-color: var(--color-primary);">+ New Deal</button>
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold" style="background-color: var(--color-primary-soft); color: var(--color-primary);">JR</div>
</div>
</header>
<!-- Content -->
<main class="ws-dashboard flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
<!-- Stats -->
<div class="ws-stats grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white rounded-xl border border-gray-200 p-5">
<p class="text-sm text-gray-500">Total Pipeline</p>
<p class="mt-1 text-xl font-bold text-gray-900">$342,500</p>
</div>
<div class="bg-white rounded-xl border border-gray-200 p-5">
<p class="text-sm text-gray-500">Deals in Progress</p>
<p class="mt-1 text-xl font-bold text-gray-900">24</p>
</div>
<div class="bg-white rounded-xl border border-gray-200 p-5">
<p class="text-sm text-gray-500">Won This Month</p>
<p class="mt-1 text-xl font-bold text-emerald-600">$87,200</p>
</div>
<div class="bg-white rounded-xl border border-gray-200 p-5">
<p class="text-sm text-gray-500">Win Rate</p>
<p class="mt-1 text-xl font-bold text-gray-900">32%</p>
</div>
</div>
<!-- Pipeline Columns -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<!-- Lead -->
<div class="bg-gray-100 rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-gray-700">Lead</h3>
<span class="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded-full">8</span>
</div>
<div class="space-y-3">
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">Acme Corp Redesign</p>
<p class="text-xs text-gray-500 mt-1">Acme Corporation</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$12,000</span>
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[10px] font-bold text-blue-700">LH</div>
</div>
</div>
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">Website Audit</p>
<p class="text-xs text-gray-500 mt-1">TechStart Inc</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$4,500</span>
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center text-[10px] font-bold text-emerald-700">MK</div>
</div>
</div>
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">SEO Package</p>
<p class="text-xs text-gray-500 mt-1">GreenLeaf Co</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$8,000</span>
<div class="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center text-[10px] font-bold text-amber-700">JR</div>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div class="bg-gray-100 rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-gray-700">Contact</h3>
<span class="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded-full">5</span>
</div>
<div class="space-y-3">
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">E-Commerce Platform</p>
<p class="text-xs text-gray-500 mt-1">RetailMax</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$45,000</span>
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold" style="background-color: var(--color-primary-soft); color: var(--color-primary);">AS</div>
</div>
</div>
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">Mobile App MVP</p>
<p class="text-xs text-gray-500 mt-1">FitTrack</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$28,000</span>
<div class="w-6 h-6 rounded-full bg-rose-100 flex items-center justify-center text-[10px] font-bold text-rose-700">PD</div>
</div>
</div>
</div>
</div>
<!-- Proposal -->
<div class="bg-gray-100 rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-gray-700">Proposal</h3>
<span class="text-xs font-medium text-gray-500 bg-white px-2 py-0.5 rounded-full">6</span>
</div>
<div class="space-y-3">
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">Brand Identity</p>
<p class="text-xs text-gray-500 mt-1">Skyline Hotels</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$18,500</span>
<div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-[10px] font-bold text-blue-700">LH</div>
</div>
</div>
<div class="hover-lift bg-white rounded-lg border border-gray-200 p-4">
<p class="text-sm font-medium text-gray-900">CRM Integration</p>
<p class="text-xs text-gray-500 mt-1">HealthFirst</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-gray-900">$32,000</span>
<div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center text-[10px] font-bold text-emerald-700">MK</div>
</div>
</div>
</div>
</div>
<!-- Won -->
<div class="bg-emerald-50 rounded-xl p-4">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-emerald-700">Won</h3>
<span class="text-xs font-medium text-emerald-600 bg-white px-2 py-0.5 rounded-full">5</span>
</div>
<div class="space-y-3">
<div class="hover-lift bg-white rounded-lg border border-emerald-200 p-4">
<p class="text-sm font-medium text-gray-900">Dashboard Redesign</p>
<p class="text-xs text-gray-500 mt-1">FinVault</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-emerald-600">$52,000</span>
<div class="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center text-[10px] font-bold text-amber-700">JR</div>
</div>
</div>
<div class="hover-lift bg-white rounded-lg border border-emerald-200 p-4">
<p class="text-sm font-medium text-gray-900">API Development</p>
<p class="text-xs text-gray-500 mt-1">DataSync</p>
<div class="flex items-center justify-between mt-3">
<span class="text-sm font-semibold text-emerald-600">$35,200</span>
<div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold" style="background-color: var(--color-primary-soft); color: var(--color-primary);">AS</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
CRM dashboard with Kanban pipeline view across four stages. Includes deal cards with value, company name, and assignee avatars. Violet accent palette.