Forem: nJ

Build a complete landing page in 30 minutes with pure CSS (no Tailwind, no frameworks)

nJ — Mon, 06 Apr 2026 10:15:50 +0000

Frameworks are great. But sometimes you just want to build a landing page fast — no npm install, no config, no build pipeline. Just HTML and CSS.

In this tutorial I'll show you how to build a complete, responsive landing page in about 20 minutes using njX UI — a pure CSS library you include with one <link> tag.

Here's what we'll build:

💡 Replace with your final result CodePen.

A complete page with:

Navigation bar
Hero section with gradient text and CTA buttons
Features grid (6 cards)
Stats section
CTA banner
Footer

Let's go.

Step 0: Setup (2 minutes)

Create an index.html file. Add njX UI via CDN — that's the only dependency:

<!DOCTYPE html>
<html data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Landing Page</title>

  <!-- njX UI — one line, everything included -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
</head>
<body>

  <!-- we'll build here -->

</body>
</html>

That's it for setup. Open the file in your browser — you'll notice the background is already dark and the font is set. The library applies base styles automatically.

Want a light theme? Change data-theme="dark" to data-theme="light". Or try "blue", "purple", "pink" — there are 9 themes total.

Step 1: Navigation (3 minutes)

<nav class="navbar navbar-sticky">
  <div class="navbar-brand">
    <a href="#" class="navbar-logo">MyProduct</a>
  </div>
  <div class="navbar-menu">
    <a class="navbar-link" href="#features">Features</a>
    <a class="navbar-link" href="#pricing">Pricing</a>
    <a class="navbar-link" href="#docs">Docs</a>
  </div>
  <div class="navbar-actions">
    <a class="btn btn-ghost btn-sm" href="#">Sign in</a>
    <a class="btn btn-primary btn-sm" href="#">Get Started</a>
  </div>
</nav>

navbar-sticky keeps it pinned to the top as you scroll. The navbar collapses gracefully on mobile.

Step 2: Hero section (5 minutes)

This is the most important section — it's what visitors see first.

<section class="section" style="padding-top: 100px; padding-bottom: 80px; text-align: center;">
  <div class="container">

    <!-- Small label above the title -->
    <span class="tag tag-primary">✦ Now in public beta</span>

    <!-- Main headline -->
    <h1 class="text-5xl font-black mt-6" style="line-height: 1.1; letter-spacing: -1px;">
      Build faster with<br>
      <span class="text-gradient-primary">less code</span>
    </h1>

    <!-- Subheadline -->
    <p class="text-lg text-muted mt-6" style="max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.7;">
      The CSS toolkit for developers who want to ship landing pages
      in hours, not days. Zero config, zero dependencies.
    </p>

    <!-- CTA buttons -->
    <div class="flex gap-3 mt-8" style="justify-content: center; flex-wrap: wrap;">
      <a href="#" class="btn btn-primary btn-lg">🚀 Start for free</a>
      <a href="#" class="btn btn-outline btn-lg">View on GitHub →</a>
    </div>

    <!-- Social proof strip -->
    <div class="flex gap-6 mt-10" style="justify-content: center; flex-wrap: wrap;">
      <span class="text-muted" style="font-size: 13px;">★★★★★ <strong class="text-main">4.9</strong> on Product Hunt</span>
      <span class="text-muted" style="font-size: 13px;">📦 <strong class="text-main">2,400+</strong> npm downloads</span>
      <span class="text-muted" style="font-size: 13px;">⭐ <strong class="text-main">340</strong> GitHub stars</span>
    </div>

  </div>
</section>

What's happening here:

text-gradient-primary gives the colored gradient text — it automatically uses the active theme color
btn btn-primary btn-lg — a large themed button, no extra CSS needed
All spacing uses utility classes (mt-6, gap-3) from the library

Step 3: Features grid (5 minutes)

Six feature cards in a responsive grid:

<section class="section" id="features">
  <div class="container">

    <div style="text-align: center; margin-bottom: 48px;">
      <span class="tag">Features</span>
      <h2 class="text-3xl font-bold mt-4">Everything you need</h2>
      <p class="text-muted mt-3" style="max-width: 460px; margin-left: auto; margin-right: auto;">
        Built for speed. Designed for developers who ship.
      </p>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">⚡</div>
          <h3 class="font-bold mb-2">Zero Dependencies</h3>
          <p class="text-muted text-sm">Pure CSS with optional vanilla JS. No npm install, no build step required.</p>
        </div>
      </div>

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">🎨</div>
          <h3 class="font-bold mb-2">9 Built-in Themes</h3>
          <p class="text-muted text-sm">Switch between dark, light, and 7 color themes with one HTML attribute.</p>
        </div>
      </div>

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">📦</div>
          <h3 class="font-bold mb-2">~40KB Minified</h3>
          <p class="text-muted text-sm">25+ components smaller than a single hero image. Fast by default.</p>
        </div>
      </div>

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">🎛️</div>
          <h3 class="font-bold mb-2">CSS Variable API</h3>
          <p class="text-muted text-sm">Every color, font, and radius is a token. Reskin everything in 10 lines.</p>
        </div>
      </div>

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">🔤</div>
          <h3 class="font-bold mb-2">12 Font Presets</h3>
          <p class="text-muted text-sm">Inter, Poppins, Space Grotesk and more. Switch fonts in one line.</p>
        </div>
      </div>

      <div class="card hover-lift">
        <div class="card-body">
          <div class="text-2xl mb-3">📐</div>
          <h3 class="font-bold mb-2">Works Everywhere</h3>
          <p class="text-muted text-sm">HTML, React, Vue, Svelte — if it renders HTML, njX UI works.</p>
        </div>
      </div>

    </div>
  </div>
</section>

hover-lift is a hover effect class from the library — it smoothly lifts the card on hover with a shadow. No extra CSS.

Step 4: Stats section (2 minutes)

Numbers build trust. This takes 2 minutes:

<section class="section">
  <div class="container">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center;">

      <div>
        <div class="text-4xl font-black text-gradient-primary">25+</div>
        <div class="text-muted text-sm mt-2">Components</div>
      </div>

      <div>
        <div class="text-4xl font-black text-gradient-primary">9</div>
        <div class="text-muted text-sm mt-2">Color themes</div>
      </div>

      <div>
        <div class="text-4xl font-black text-gradient-primary">~40KB</div>
        <div class="text-muted text-sm mt-2">Minified size</div>
      </div>

      <div>
        <div class="text-4xl font-black text-gradient-primary">0</div>
        <div class="text-muted text-sm mt-2">Dependencies</div>
      </div>

    </div>
  </div>
</section>

Step 5: CTA banner (2 minutes)

A final push before the footer:

<section class="section">
  <div class="container">
    <div class="card border-gradient-primary" style="text-align: center; padding: 52px 40px;">
      <h2 class="text-3xl font-bold mb-4">Ready to ship faster?</h2>
      <p class="text-muted mb-8" style="max-width: 400px; margin-left: auto; margin-right: auto;">
        Drop one link tag into your project and start building in minutes.
      </p>
      <div style="background: var(--bg-main); border: 1px solid color-mix(in srgb, var(--color-neutral-600) 25%, transparent); border-radius: 10px; padding: 10px 18px; display: inline-block; margin-bottom: 24px;">
        <code style="font-size: 13px; color: var(--color-primary);">
          &lt;link rel="stylesheet" href="cdn.jsdelivr.net/npm/njx-ui/css/style.min.css"&gt;
        </code>
      </div>
      <div class="flex gap-3" style="justify-content: center; flex-wrap: wrap;">
        <a href="#" class="btn btn-primary">Get Started Free</a>
        <a href="#" class="btn btn-ghost">★ Star on GitHub</a>
      </div>
    </div>
  </div>
</section>

border-gradient-primary applies a gradient border that follows the active theme — a nice premium touch with zero custom CSS.

Step 6: Footer (1 minute)

<footer class="section" style="border-top: 1px solid color-mix(in srgb, var(--color-neutral-600) 18%, transparent); padding-top: 32px; padding-bottom: 32px;">
  <div class="container" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
    <span class="text-muted text-sm">© 2025 MyProduct. Built with njX UI.</span>
    <div class="flex gap-4">
      <a href="#" class="text-muted text-sm hover-primary">GitHub</a>
      <a href="#" class="text-muted text-sm hover-primary">npm</a>
      <a href="#" class="text-muted text-sm hover-primary">Docs</a>
    </div>
  </div>
</footer>

Bonus: Add a theme switcher (optional, 5 minutes)

Want visitors to be able to switch the theme live? Add this anywhere on the page:

<!-- Theme pills in the navbar -->
<div style="display: flex; gap: 6px; align-items: center;">
  <div onclick="setTheme('dark')"   style="width:16px;height:16px;border-radius:50%;background:#4a4a56;cursor:pointer"></div>
  <div onclick="setTheme('blue')"   style="width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer"></div>
  <div onclick="setTheme('purple')" style="width:16px;height:16px;border-radius:50%;background:#a855f7;cursor:pointer"></div>
  <div onclick="setTheme('pink')"   style="width:16px;height:16px;border-radius:50%;background:#ec4899;cursor:pointer"></div>
  <div onclick="setTheme('light')"  style="width:16px;height:16px;border-radius:50%;background:#e2e8f0;cursor:pointer"></div>
</div>

<script>
  function setTheme(t) {
    document.documentElement.setAttribute('data-theme', t);
    try { localStorage.setItem('njx-theme', t); } catch(e) {}
  }
  const saved = localStorage.getItem('njx-theme');
  if (saved) document.documentElement.setAttribute('data-theme', saved);
</script>

That's literally the entire theme switcher. Click a dot → entire page recolors instantly using CSS custom properties. No page reload.

Final result

Here's the complete page we just built:

💡 Replace with your final landing page CodePen.

The whole thing is ~60 lines of HTML with zero custom CSS. Try changing data-theme="dark" to data-theme="purple" on the <html> tag — every color on the page updates at once.

What we used

Class	What it does
`data-theme="dark"`	Sets the active color theme
`btn btn-primary btn-lg`	Large themed button
`text-gradient-primary`	Gradient text in theme color
`card hover-lift`	Card that lifts on hover
`border-gradient-primary`	Gradient border card
`text-muted`	Secondary text color
`text-5xl font-black`	Typography utilities
`container`	Centered max-width wrapper
`section`	Section with standard padding

Going further

More components: njxui.dev — full docs with examples for all 25+ components
GitHub: github.com/njbSaab/njx-css-ui
npm: npm install njx-ui

In the next post I'll show how the 9-theme system actually works under the hood — pure CSS custom properties, zero JavaScript for the styling itself.

Did this save you time? Drop a ❤️ or leave a comment — what would you build next?

I built a zero-dependency CSS library with 9 built-in themes — here's why

nJ — Wed, 01 Apr 2026 14:38:35 +0000

I was building my tenth landing page this year.

Same routine: open a new project, copy the button styles from the last one, paste the card CSS, tweak the colors, fight with Bootstrap's opinionated defaults or spend 40 minutes configuring Tailwind just to get a centered hero section.

At some point I asked myself: why don't I have a single file I can drop into any project and just start building?

That question turned into six months of work. The result is njX UI — a pure CSS component library built specifically for landing pages.

The problem with existing options

I didn't want to build yet another library. I genuinely tried to use what existed:

Bootstrap — great for dashboards and admin panels. For landing pages it feels heavy (~200KB), opinionated, and every Bootstrap site looks the same unless you heavily customize it.

Tailwind CSS — I actually like Tailwind. But it requires a build step, PostCSS, a config file, and you're essentially writing CSS in your HTML. For a quick landing page or a client project, that's overhead I don't always want.

shadcn/ui, Radix, etc. — require React. Not always an option.

What I actually wanted:

One <link> tag, done
Pre-built components that look good out of the box
Multiple themes I can switch with a single attribute
Pure HTML — no framework, no build step, no npm required

So I built it.

What is njX UI

njX UI is a CSS component library (~40KB minified) with 25+ components and 9 built-in color themes.

You include it like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">

And use components like this:

<button class="btn btn-primary">Get Started</button>
<button class="btn btn-outline">Learn More</button>

That's it. No configuration, no build step, no JavaScript required for styling.

9 themes, one attribute

The feature I'm most happy with is the theme system. Every color in the library is a CSS custom property token. Switching themes is literally one HTML attribute:

<!-- Dark theme (default) -->
<html data-theme="dark">

<!-- Switch to blue theme -->
<html data-theme="blue">

<!-- Switch to pink theme -->
<html data-theme="pink">

Available themes: dark, light, red, blue, green, cyan, yellow, pink, purple

All components — buttons, cards, forms, notifications, everything — update automatically.

Here's a live demo with all 9 themes. Click the color dots in the top bar:

What's included

25+ components:

Category	Components
Layout	Sections, Hero, Grid, Container
UI	Buttons (50+ variants), Cards, Badges, Tags
Forms	Input, Select, Checkbox, Radio, Switch
Feedback	Notifications, Toast, Modals, Popups
Navigation	Tabs, Sidebar/Drawer (6 variants)
Data	Tables, Skeleton loaders
Effects	15+ CSS animations, 40+ hover effects
Gradients	50+ gradient classes (bg, text, border, animated)

Utilities built in:

Typography scale with 12 font presets
Spacing system
Color tokens for all semantic states (primary, accent, success, error, warning)
Dark/light mode out of the box

Real-world usage: a hero section in 5 minutes

Here's a complete hero section using only njX UI classes:

<!DOCTYPE html>
<html data-theme="dark">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
</head>
<body>

  <section class="section-hero">
    <div class="container">
      <span class="tag tag-primary">New · v1.0.7</span>
      <h1 class="text-5xl font-black mt-4">
        Build landing pages<br>
        <span class="text-gradient-primary">10x faster</span>
      </h1>
      <p class="text-lg text-muted mt-4 max-w-lg">
        Zero dependencies. One link tag. 25+ components, 9 themes,
        full CSS variable control.
      </p>
      <div class="flex gap-3 mt-8">
        <button class="btn btn-primary btn-lg">Get Started</button>
        <button class="btn btn-outline btn-lg">View Docs →</button>
      </div>
    </div>
  </section>

</body>
</html>

Switch the data-theme attribute on <html> and the entire page recolors instantly.

The theme switcher (optional JS, ~10 lines)

If you want a live theme switcher like most of my demos have, here's the entire JavaScript needed:

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('njx-theme', theme);
}

// Restore saved theme on page load
const saved = localStorage.getItem('njx-theme');
if (saved) document.documentElement.setAttribute('data-theme', saved);

No library, no framework, no build step. Ten lines of vanilla JS.

Buttons — because every project needs buttons

One of the most complete sections is the button collection. 50+ variants:

💡 Replace with your actual buttons CodePen slug.

Sizes from btn-xs to btn-2xl, solid + outline + ghost + gradient + glow + animated + icon + group + loading states. All in one class.

Animations and hover effects

40+ hover effects and 15+ CSS animations — all single classes, no JS:

<!-- Hover effects -->
<div class="hover-lift">lifts on hover</div>
<div class="hover-glow">glows on hover</div>
<div class="hover-tilt">3D tilt on hover</div>

<!-- CSS animations -->
<div class="animate-float">floating animation</div>
<div class="animate-pulse">pulsing animation</div>
<div class="animate-shimmer">shimmer animation</div>

💡 Replace with your actual animations CodePen slug.

How it's installed

Via CDN (no install):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/njx-ui/css/style.min.css">
<!-- Optional JS for sidebars, modals, tabs -->
<script src="https://cdn.jsdelivr.net/npm/njx-ui/js/njx.js"></script>

Via npm:

npm install njx-ui

Current state and what's next

The library is at v1.0.7 and actively developed. What's stable:

All 25+ components
Full 9-theme system
Sidebar/Drawer with 6 variants and full JS API
Animation and hover utilities

What's coming:

Dark/light toggle component (already in docs)
More layout primitives
Better documentation with search

Why open source

I use this library in client projects. Making it open source means:

I'm forced to keep the code clean and documented
Other developers can catch bugs I miss
If it helps one person skip rewriting the same button for the eleventh time, that's worth it