This tutorial builds a small "profile card + links" page from scratch with Nakshora 3.0. Follow along in a single HTML file.

The skeleton#

html
<body class="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
  <main class="max-w-md mx-auto px-6 py-16">
  </main>
</body>

Two concepts already at work: the spacing scale (utilities/spacing/spacing-scale|0…96) powers p-6/py-16, and mx-auto + max-w-md center the column (centering patterns).

The card#

html
<div class="glass p-8 rounded-2xl shadow-xl text-center">
  <img class="w-20 h-20 rounded-full mx-auto ring-4 ring-white/50" src="avatar.jpg" alt="Profile photo" />
  <h1 class="mt-4 text-xl font-bold">Ayesha Rahman</h1>
  <p class="text-sm text-slate-500 dark:text-slate-400">Frontend engineer · Dhaka</p>
</div>

Responsive without media queries#

You never write @media by hand: prefix utilities with screens instead. Stack two columns on tablets:

html
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">…</div>

Read responsive/index|Responsive design for the mobile-first model.

Ship it#

Run your build (npm run build), upload the output, done. The generated CSS is static and cache-friendly.

Pro tip. Stuck on a layout? The cookbook/index|Cookbook has 100+ one-line solutions — centering, sticky footers, full-bleed sections and friends.