start-page widgets personal-dashboard igoogle netvibes portal homepage modern
Start Page
Personal start page built from many small widgets — weather, tasks, bookmarks, headlines, calendar, and notes.
modern Responsive
Live Preview
Sections
greetingsearchweathertasksbookmarksheadlinescalendarnotes
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>Start — Your personal dashboard</title>
<meta name="description" content="A personal start page built from many small widgets — weather, bookmarks, tasks, news, calendar, and notes — in the spirit of iGoogle and Netvibes." />
<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; }
</style>
</head>
<body class="bg-slate-100 text-slate-800">
<!-- Greeting bar + search -->
<header class="bg-white">
<div class="mx-auto max-w-7xl px-4 py-6 text-center sm:px-6">
<p class="text-sm text-slate-400">Friday, 13 June 2026 · 09:24</p>
<h1 class="mt-1 text-2xl font-bold text-slate-900">Good morning, Sam</h1>
<form role="search" action="#" class="mx-auto mt-4 flex max-w-xl">
<label for="q" class="sr-only">Search the web</label>
<input id="q" name="q" type="search" placeholder="Search the web…" class="w-full rounded-l-full border border-r-0 border-slate-300 px-5 py-2.5 text-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-100" />
<button type="submit" class="rounded-r-full bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700">Search</button>
</form>
</div>
</header>
<!-- Widget grid -->
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
<h2 class="sr-only">Widgets</h2>
<div class="columns-1 gap-5 sm:columns-2 lg:columns-3 [&>section]:mb-5 [&>section]:break-inside-avoid">
<!-- Weather -->
<section aria-labelledby="w-weather" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 id="w-weather" class="text-xs font-semibold uppercase tracking-wide text-slate-400">Weather · Lisbon</h3>
<div class="mt-3 flex items-center justify-between">
<div><p class="text-4xl font-bold text-slate-900">23°</p><p class="text-sm text-slate-500">Partly cloudy</p></div>
<svg class="h-12 w-12 text-amber-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v2m0 14v2M5.6 5.6l1.4 1.4m10 10l1.4 1.4M3 12h2m14 0h2M5.6 18.4l1.4-1.4m10-10l1.4-1.4M12 8a4 4 0 100 8 4 4 0 000-8z"/></svg>
</div>
<dl class="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
<div class="rounded-lg bg-slate-50 py-2"><dt class="text-slate-400">Sat</dt><dd class="font-semibold text-slate-700">25°</dd></div>
<div class="rounded-lg bg-slate-50 py-2"><dt class="text-slate-400">Sun</dt><dd class="font-semibold text-slate-700">21°</dd></div>
<div class="rounded-lg bg-slate-50 py-2"><dt class="text-slate-400">Mon</dt><dd class="font-semibold text-slate-700">24°</dd></div>
</dl>
</section>
<!-- Tasks -->
<section aria-labelledby="w-tasks" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 id="w-tasks" class="text-xs font-semibold uppercase tracking-wide text-slate-400">Today's tasks</h3>
<ul class="mt-3 space-y-2 text-sm">
<li class="flex items-center gap-2"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600" checked /><span class="text-slate-400 line-through">Review pull requests</span></li>
<li class="flex items-center gap-2"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600" /><span class="text-slate-700">Draft Q3 roadmap</span></li>
<li class="flex items-center gap-2"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600" /><span class="text-slate-700">Call the supplier</span></li>
<li class="flex items-center gap-2"><input type="checkbox" class="h-4 w-4 rounded border-slate-300 text-indigo-600" /><span class="text-slate-700">Water the plants</span></li>
</ul>
</section>
<!-- Bookmarks -->
<section aria-labelledby="w-bookmarks" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 id="w-bookmarks" class="text-xs font-semibold uppercase tracking-wide text-slate-400">Bookmarks</h3>
<div class="mt-3 grid grid-cols-4 gap-3 text-center text-xs">
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-rose-100 font-bold text-rose-600">M</span><span class="mt-1 block text-slate-500">Mail</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-sky-100 font-bold text-sky-600">C</span><span class="mt-1 block text-slate-500">Calendar</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-violet-100 font-bold text-violet-600">D</span><span class="mt-1 block text-slate-500">Drive</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 font-bold text-emerald-600">N</span><span class="mt-1 block text-slate-500">Notes</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100 font-bold text-amber-600">T</span><span class="mt-1 block text-slate-500">Tasks</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-100 font-bold text-indigo-600">R</span><span class="mt-1 block text-slate-500">Repos</span></a>
<a href="#" class="group"><span class="mx-auto flex h-10 w-10 items-center justify-center rounded-lg bg-slate-200 font-bold text-slate-600">+</span><span class="mt-1 block text-slate-500">Add</span></a>
</div>
</section>
<!-- News feed -->
<section aria-labelledby="w-news" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 id="w-news" class="text-xs font-semibold uppercase tracking-wide text-slate-400">Headlines</h3>
<ul class="mt-3 space-y-3 text-sm">
<li><a href="#" class="font-medium text-slate-800 hover:text-indigo-600">Markets steady as inflation cools</a><p class="text-xs text-slate-400">Reuters · 1h</p></li>
<li><a href="#" class="font-medium text-slate-800 hover:text-indigo-600">New telescope captures distant galaxy</a><p class="text-xs text-slate-400">Science Daily · 3h</p></li>
<li><a href="#" class="font-medium text-slate-800 hover:text-indigo-600">City unveils new cycling network</a><p class="text-xs text-slate-400">Local · 5h</p></li>
</ul>
</section>
<!-- Calendar -->
<section aria-labelledby="w-cal" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
<h3 id="w-cal" class="text-xs font-semibold uppercase tracking-wide text-slate-400">Up next</h3>
<ul class="mt-3 space-y-3 text-sm">
<li class="flex gap-3"><span class="w-12 shrink-0 font-semibold text-indigo-600">10:00</span><span class="text-slate-700">Standup with the team</span></li>
<li class="flex gap-3"><span class="w-12 shrink-0 font-semibold text-indigo-600">13:30</span><span class="text-slate-700">Design review</span></li>
<li class="flex gap-3"><span class="w-12 shrink-0 font-semibold text-indigo-600">16:00</span><span class="text-slate-700">1:1 with Morgan</span></li>
</ul>
</section>
<!-- Notes -->
<section aria-labelledby="w-notes" class="rounded-xl border border-slate-200 bg-amber-50 p-5 shadow-sm">
<h3 id="w-notes" class="text-xs font-semibold uppercase tracking-wide text-amber-600">Sticky note</h3>
<p class="mt-3 text-sm leading-relaxed text-amber-900">Remember to send the invoice and book flights for the conference before Friday.</p>
</section>
</div>
</main>
</body>
</html>
A widget start page — the personal-portal layout from the iGoogle/Netvibes era. Many small, self-contained widgets in a reflowing grid, a pattern modern generators almost never produce in favour of single-purpose app dashboards.