Skip to content

CSS & component framework comparison: 12 styles with Playwright screenshots #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

CSS & component framework comparison: 12 styles with Playwright screenshots #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1773627
Initial plan
Copilot Mar 31, 2026
3385b08
Add CSS framework comparison with 12 styles and Playwright screenshots
Copilot Mar 31, 2026
6f6879b
Fix path injection in test HTTP server (sanitize req.url)
Copilot Mar 31, 2026
3de94ea
Fix DaisyUI showcase: use v4 full CSS bundle (v5 incompatible with Ta…
Copilot Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 143 additions & 0 deletions docs/css-comparison/01-tailwind.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizard RPG – Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwindcss.config = {
theme: {
extend: {
colors: { wizard: { purple: '#7c3aed', gold: '#f59e0b', dark: '#1e1b4b' } }
}
}
}
</script>
</head>
<body class="bg-wizard-dark text-gray-100 min-h-screen">

<!-- Navigation -->
<nav class="bg-indigo-900/80 border-b border-indigo-700 px-6 py-3 flex items-center justify-between">
<span class="text-xl font-bold text-wizard-gold">🧙 Wizard Academy RPG</span>
<div class="flex gap-4 text-sm">
<a href="#" class="hover:text-wizard-gold transition">Dashboard</a>
<a href="#" class="hover:text-wizard-gold transition">Spells</a>
<a href="#" class="hover:text-wizard-gold transition">Battle</a>
<a href="#" class="hover:text-wizard-gold transition">Leaderboard</a>
</div>
<span class="bg-wizard-purple text-white px-3 py-1 rounded-full text-xs">Level 12</span>
</nav>

<!-- Hero -->
<section class="text-center py-12 bg-gradient-to-b from-indigo-900 to-wizard-dark">
<h1 class="text-4xl font-bold mb-2">Welcome, Archmage!</h1>
<p class="text-indigo-300 max-w-xl mx-auto">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
<div class="mt-6 flex justify-center gap-3">
<button class="bg-wizard-purple hover:bg-purple-600 text-white px-6 py-2 rounded-lg font-semibold transition">Start Duel</button>
<button class="border border-wizard-gold text-wizard-gold hover:bg-wizard-gold hover:text-black px-6 py-2 rounded-lg font-semibold transition">Brew Potion</button>
</div>
</section>

<!-- Character Cards -->
<section class="max-w-5xl mx-auto py-10 px-4">
<h2 class="text-2xl font-bold mb-6">Your Party</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-xl">🧙</div>
<div>
<h3 class="font-bold">Eldrin the Wise</h3>
<span class="text-xs text-indigo-400">Fire Mage · Lvl 12</span>
</div>
</div>
<div class="space-y-2 text-sm">
<div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:85%"></div></div></div>
<div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:60%"></div></div></div>
</div>
<div class="mt-3 flex gap-2">
<span class="bg-red-900/50 text-red-300 text-xs px-2 py-0.5 rounded">🔥 Fire</span>
<span class="bg-yellow-900/50 text-yellow-300 text-xs px-2 py-0.5 rounded">⚡ Lightning</span>
</div>
</div>
<div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-xl">🧝</div>
<div>
<h3 class="font-bold">Lyra Frostweaver</h3>
<span class="text-xs text-indigo-400">Ice Sorceress · Lvl 10</span>
</div>
</div>
<div class="space-y-2 text-sm">
<div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:70%"></div></div></div>
<div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:90%"></div></div></div>
</div>
<div class="mt-3 flex gap-2">
<span class="bg-cyan-900/50 text-cyan-300 text-xs px-2 py-0.5 rounded">❄️ Ice</span>
<span class="bg-purple-900/50 text-purple-300 text-xs px-2 py-0.5 rounded">✨ Arcane</span>
</div>
</div>
<div class="bg-indigo-900/50 border border-indigo-700 rounded-xl p-5">
<div class="flex items-center gap-3 mb-3">
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-xl">🧌</div>
<div>
<h3 class="font-bold">Thorin Earthshaker</h3>
<span class="text-xs text-indigo-400">Earth Druid · Lvl 8</span>
</div>
</div>
<div class="space-y-2 text-sm">
<div><span class="text-gray-400">HP</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-green-500 h-2 rounded-full" style="width:95%"></div></div></div>
<div><span class="text-gray-400">Mana</span> <div class="bg-gray-700 rounded-full h-2 mt-1"><div class="bg-blue-500 h-2 rounded-full" style="width:40%"></div></div></div>
</div>
<div class="mt-3 flex gap-2">
<span class="bg-green-900/50 text-green-300 text-xs px-2 py-0.5 rounded">🌿 Earth</span>
<span class="bg-amber-900/50 text-amber-300 text-xs px-2 py-0.5 rounded">🛡️ Defense</span>
</div>
</div>
</div>
</section>

<!-- Spell Table -->
<section class="max-w-5xl mx-auto py-6 px-4">
<h2 class="text-2xl font-bold mb-4">Known Spells</h2>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-indigo-900/60 text-indigo-300 uppercase text-xs">
<tr><th class="px-4 py-3">Spell</th><th class="px-4 py-3">Element</th><th class="px-4 py-3">Power</th><th class="px-4 py-3">Mana Cost</th><th class="px-4 py-3">Action</th></tr>
</thead>
<tbody class="divide-y divide-indigo-800">
<tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Fireball</td><td class="px-4 py-3">🔥 Fire</td><td class="px-4 py-3">45</td><td class="px-4 py-3">30</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
<tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Frost Nova</td><td class="px-4 py-3">❄️ Ice</td><td class="px-4 py-3">35</td><td class="px-4 py-3">25</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
<tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Lightning Bolt</td><td class="px-4 py-3">⚡ Lightning</td><td class="px-4 py-3">55</td><td class="px-4 py-3">40</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
<tr class="hover:bg-indigo-900/30"><td class="px-4 py-3">Earthquake</td><td class="px-4 py-3">🌿 Earth</td><td class="px-4 py-3">60</td><td class="px-4 py-3">50</td><td class="px-4 py-3"><button class="text-wizard-gold hover:underline text-xs">Cast</button></td></tr>
</tbody>
</table>
</div>
</section>

<!-- Login Form -->
<section class="max-w-md mx-auto py-10 px-4">
<h2 class="text-2xl font-bold mb-4 text-center">Sign In to Academy</h2>
<form class="bg-indigo-900/40 border border-indigo-700 rounded-xl p-6 space-y-4">
<div>
<label class="block text-sm text-indigo-300 mb-1">Email</label>
<input type="email" placeholder="wizard@academy.com" class="w-full bg-indigo-950 border border-indigo-700 rounded-lg px-4 py-2 text-white placeholder-indigo-500 focus:ring-2 focus:ring-wizard-purple focus:outline-none">
</div>
<div>
<label class="block text-sm text-indigo-300 mb-1">Password</label>
<input type="password" placeholder="••••••••" class="w-full bg-indigo-950 border border-indigo-700 rounded-lg px-4 py-2 text-white placeholder-indigo-500 focus:ring-2 focus:ring-wizard-purple focus:outline-none">
</div>
<div class="flex items-center gap-2">
<input type="checkbox" class="rounded border-indigo-700 bg-indigo-950 text-wizard-purple">
<label class="text-sm text-indigo-300">Remember me</label>
</div>
<button type="submit" class="w-full bg-wizard-purple hover:bg-purple-600 text-white py-2 rounded-lg font-semibold transition">Enter the Academy</button>
</form>
</section>

<!-- Footer -->
<footer class="text-center py-6 text-indigo-500 text-sm border-t border-indigo-800">
<p>Wizard Academy RPG · Styled with <strong>Tailwind CSS v4</strong> · Utility-first CSS framework</p>
</footer>
</body>
</html>
151 changes: 151 additions & 0 deletions docs/css-comparison/02-bootstrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizard RPG – Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #1a1a2e; color: #e0e0e0; }
.navbar { background: #16213e !important; }
.card { background: #16213e; border-color: #0f3460; }
.table { color: #e0e0e0; }
.form-control { background: #0f3460; border-color: #533483; color: #fff; }
.form-control::placeholder { color: #888; }
.form-control:focus { background: #0f3460; color: #fff; border-color: #e94560; box-shadow: 0 0 0 .25rem rgba(233,69,96,.25); }
.btn-wizard { background: #533483; border-color: #533483; color: #fff; }
.btn-wizard:hover { background: #e94560; border-color: #e94560; color: #fff; }
.btn-outline-gold { border-color: #f0a500; color: #f0a500; }
.btn-outline-gold:hover { background: #f0a500; color: #000; }
.badge-fire { background: #dc3545; }
.badge-ice { background: #0dcaf0; color: #000; }
.badge-lightning { background: #ffc107; color: #000; }
.badge-earth { background: #198754; }
.progress { background: #0f3460; height: 8px; }
.text-gold { color: #f0a500 !important; }
.hero-section { background: linear-gradient(to bottom, #16213e, #1a1a2e); }
.table-dark-custom { --bs-table-bg: #16213e; --bs-table-border-color: #0f3460; }
</style>
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark border-bottom border-secondary">
<div class="container">
<a class="navbar-brand text-gold fw-bold" href="#">🧙 Wizard Academy RPG</a>
<div class="navbar-nav ms-auto gap-3">
<a class="nav-link" href="#">Dashboard</a>
<a class="nav-link" href="#">Spells</a>
<a class="nav-link" href="#">Battle</a>
<a class="nav-link" href="#">Leaderboard</a>
</div>
<span class="badge bg-primary ms-3">Level 12</span>
</div>
</nav>

<!-- Hero -->
<section class="hero-section text-center py-5">
<div class="container">
<h1 class="display-4 fw-bold">Welcome, Archmage!</h1>
<p class="lead text-secondary mx-auto" style="max-width:600px">Master the arcane arts, duel rival wizards, brew powerful potions, and rise through the ranks of the Academy.</p>
<div class="mt-4">
<button class="btn btn-wizard btn-lg me-2">Start Duel</button>
<button class="btn btn-outline-gold btn-lg">Brew Potion</button>
</div>
</div>
</section>

<!-- Character Cards -->
<section class="container py-5">
<h2 class="fw-bold mb-4">Your Party</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="card p-4">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rounded-circle bg-primary d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧙</div>
<div>
<h5 class="mb-0 fw-bold">Eldrin the Wise</h5>
<small class="text-secondary">Fire Mage · Lvl 12</small>
</div>
</div>
<div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:85%"></div></div></div>
<div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:60%"></div></div></div>
<div><span class="badge badge-fire me-1">🔥 Fire</span><span class="badge badge-lightning">⚡ Lightning</span></div>
</div>
</div>
<div class="col-md-4">
<div class="card p-4">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rounded-circle bg-info d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧝</div>
<div>
<h5 class="mb-0 fw-bold">Lyra Frostweaver</h5>
<small class="text-secondary">Ice Sorceress · Lvl 10</small>
</div>
</div>
<div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:70%"></div></div></div>
<div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:90%"></div></div></div>
<div><span class="badge badge-ice me-1">❄️ Ice</span><span class="badge bg-secondary">✨ Arcane</span></div>
</div>
</div>
<div class="col-md-4">
<div class="card p-4">
<div class="d-flex align-items-center gap-3 mb-3">
<div class="rounded-circle bg-success d-flex align-items-center justify-content-center" style="width:48px;height:48px;font-size:1.3rem">🧌</div>
<div>
<h5 class="mb-0 fw-bold">Thorin Earthshaker</h5>
<small class="text-secondary">Earth Druid · Lvl 8</small>
</div>
</div>
<div class="mb-2"><small class="text-secondary">HP</small><div class="progress mt-1"><div class="progress-bar bg-success" style="width:95%"></div></div></div>
<div class="mb-3"><small class="text-secondary">Mana</small><div class="progress mt-1"><div class="progress-bar bg-info" style="width:40%"></div></div></div>
<div><span class="badge badge-earth me-1">🌿 Earth</span><span class="badge bg-warning text-dark">🛡️ Defense</span></div>
</div>
</div>
</div>
</section>

<!-- Spell Table -->
<section class="container py-3">
<h2 class="fw-bold mb-4">Known Spells</h2>
<div class="table-responsive">
<table class="table table-dark-custom table-hover">
<thead><tr><th>Spell</th><th>Element</th><th>Power</th><th>Mana Cost</th><th>Action</th></tr></thead>
<tbody>
<tr><td>Fireball</td><td>🔥 Fire</td><td>45</td><td>30</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
<tr><td>Frost Nova</td><td>❄️ Ice</td><td>35</td><td>25</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
<tr><td>Lightning Bolt</td><td>⚡ Lightning</td><td>55</td><td>40</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
<tr><td>Earthquake</td><td>🌿 Earth</td><td>60</td><td>50</td><td><button class="btn btn-sm btn-outline-gold">Cast</button></td></tr>
</tbody>
</table>
</div>
</section>

<!-- Login Form -->
<section class="container py-5" style="max-width:450px">
<h2 class="fw-bold mb-4 text-center">Sign In to Academy</h2>
<div class="card p-4">
<form>
<div class="mb-3">
<label class="form-label text-secondary">Email</label>
<input type="email" class="form-control" placeholder="wizard@academy.com">
</div>
<div class="mb-3">
<label class="form-label text-secondary">Password</label>
<input type="password" class="form-control" placeholder="••••••••">
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input">
<label class="form-check-label text-secondary">Remember me</label>
</div>
<button type="submit" class="btn btn-wizard w-100">Enter the Academy</button>
</form>
</div>
</section>

<!-- Footer -->
<footer class="text-center py-4 text-secondary border-top border-secondary">
<p>Wizard Academy RPG · Styled with <strong>Bootstrap 5</strong> · The most popular CSS framework</p>
</footer>

</body>
</html>
Loading