Tech Mono Cloud Server Pricing Table for Divi 5: Three-Plan Comparison

Pricing SaaS Dark

Compare Nano, Standard, and Dedicated cloud server plans side by side. Dark monochrome Divi 5 pricing layout with hourly billing, NVMe storage, bandwidth, and snapshots — built with JetBrains Mono.

Rate this element

Be the first to rate

Download this section, free

Divi 5 JSON, imports in seconds
Commercial license included
No account needed

Click to view the full page

Overview

The layout opens with a two-line header stack: a 13px uppercase JetBrains Mono eyebrow in muted sage (#8d9892) reading "Compare plans," and a 44px Space Grotesk h2 at −1px letter-spacing that snaps to 36px on tablet and 30px on phone. That pairing is deliberate — monospace everywhere except the hero heading signals the difference between ambient chrome and the one thing that actually needs to read as a statement. Below the headline sits an 18px JetBrains Mono subline that sets billing expectations upfront: hourly billing capped at the monthly price, resize any time. That copy lives inside its own max-width 640px group, left-aligned within the wider 1080px content wrapper, so the header hierarchy stays visually narrow and readable even on ultra-wide screens.

The comparison table itself is built as a four-column CSS grid inside a divi/group with gridColumnCount: 4 and a 1px column and row gap. The gap background is set to #2a312d — a dark forest tone — while each cell sits on #0b0d0c. That single-pixel color difference is what creates the grid lines without any actual border declarations on the cells themselves. The Standard ("Most popular") column is distinguished by a background shift to #131715, a value just light enough to read against the base but dark enough to stay in the same tonal family. No colored highlight band, no gradient — just a two-value palette doing the heavy lifting.

Five feature rows span the grid: NVMe storage (checkmarks across all three plans), Bandwidth (25 GB / 200 GB / 2 TB), Daily snapshots (unavailable on Nano, available on Standard and Dedicated), Private networking (Dedicated only), and Dedicated CPU (Dedicated only). Availability is communicated with Font Awesome solid checkmarks ( at 16px, centered) for included features and an em-dash in #8d9892 for absent ones — the muted color on the dash makes absence feel factual rather than negative, consistent with the terminal-readout tone throughout.

The CTA button at the bottom — "Deploy a server" — uses a #3dff9a neon green fill with near-black #04130b text, a 2px border-radius (nearly square), and a 1px dashed border in the same green. That dashed border is a studied choice: it mimics a command-line cursor outline, keeping the button feel native to the terminal aesthetic rather than reaching for a SaaS-polished pill shape. Section padding steps down cleanly from 88px to 64px to 40px across the three breakpoints, and the row becomes a flex column on phone so the full-width grid stacks without horizontal scroll.

What’s inside

Four-column CSS grid built with native `divi/group` flex layout — 1px gap creates hairline dividers via background color contrast, no border declarations needed
Three-plan header row with plan names, "Most popular" badge, and prices, each in a separate group cell using JetBrains Mono bold
Five feature rows mixing `divi/icon` Font Awesome checkmarks and em-dash `divi/text` cells to show feature availability per plan
Standard (middle) column highlighted with a distinct `#131715` background across every row for a persistent "recommended" visual track
Two-font system: Space Grotesk h2 for the section headline, JetBrains Mono for all table copy, prices, labels, and the CTA button
Neon green `#3dff9a` `divi/button` with dashed 1px border and 2px radius — styled to match the terminal aesthetic without a pill shape
Three-breakpoint responsive spacing: section padding 88px / 64px / 40px, heading size 44px / 36px / 30px, cell padding 16px / 6px horizontal on phone

Who it’s for

This section is a natural fit for cloud hosting providers, VPS and bare-metal server platforms, developer-tooling SaaS, and infrastructure-as-a-service products where the buyer already understands what "NVMe storage" and "private networking" mean. It also works well for managed WordPress hosts, database hosting, and CDN or edge services that use tiered plans. The terminal typography and near-black palette signal technical credibility without explanation, making it particularly effective for products sold to developers, DevOps teams, and technical co-founders who distrust marketing gloss.

Customization tips

Start by swapping the three plan names (Nano, Standard, Dedicated) and their prices in the header row cells. The five feature-row labels in column one are plain divi/text modules — replace them with your own feature names; keep labels short (two to three words) or the cells will wrap awkwardly at phone padding of 6px. Checkmark cells use divi/icon with Font Awesome  — to mark a feature as unavailable, swap the icon module for a divi/text module containing — and set the color to #8d9892 to match the existing dash style. The neon green #3dff9a appears only on the CTA button fill and border; updating it in both the background.desktop.value.color and border.desktop.value.styles.all.color fields is all you need for a full accent-color change. The highlighted "Most popular" column is distinguished purely by its #131715 background — apply the same hex to whichever column you want featured.

How to install this layout

Download the layout JSON file from this page.
Open the target page in the Divi 5 builder.
Open the portability panel (up/down arrows icon) and choose the Import tab.
Upload the JSON. Tick “replace existing content” only for full-page imports.
Check the page at desktop and mobile widths, then swap in your copy and images.

Full walkthrough with troubleshooting: How to Import a Divi 5 Layout.

Questions about Tech Mono Cloud Server Pricing Table for Divi 5: Three-Plan Comparison

Does the table scroll horizontally on mobile, or does it reflow?

The row is set to `flexDirection: column` on phone, so the column wrapper stacks to full width. The grid itself remains a four-column layout within that full width, but the horizontal cell padding drops to 6px on phone to fit smaller screens. If you add a fifth plan column, test on phone — you may need to reduce font sizes further or switch to a horizontal scroll wrapper.

What modules make up the comparison grid?

Every cell in the grid is a `divi/group` module. Feature availability is shown with `divi/icon` (Font Awesome checkmark) or `divi/text` (em-dash). Feature labels and prices are also `divi/text` modules. There are no custom HTML modules or shortcodes — the entire table is built from standard Divi 5 primitives.

How are the grid lines drawn between cells?

The outer grid group has a `#2a312d` background with `1px` column and row gaps. Each cell group sits on `#0b0d0c`. The gap color showing through those 1px gaps creates the grid lines. If you change the section background, update the outer grid group's background to match your desired divider color.

Which column should I edit first to make it feel like mine?

The plan name and price cells in the header row — those are the first things a visitor reads. Update the three plan names, the three price values, and the "Deploy a server" button text. Those six text changes plus your accent color on the CTA button will make the section feel site-specific before you touch any feature rows.

Are there any images or background photos in this layout?

No. The entire section is typography and icons on solid color backgrounds. There are no image modules, no background photos, and no gradients. This means load time is negligible and the section renders identically across all devices and network speeds.

Can I add or remove feature rows?

Yes — each feature row is a set of four adjacent group modules inside the grid. To add a row, duplicate an existing four-cell group and update the text or icon content. To remove a row, delete the four consecutive group modules for that row. The grid reflows automatically because row count is implicit in the number of children, not declared explicitly.

Which Divi version does this layout need?

Divi 5. The layout is generated natively for Divi 5 and validated against its real module structure before publication, so it imports clean into the current builder.

Can I use this layout on client websites?

Yes. Every download includes a commercial license covering unlimited sites you own or build for clients. Only reselling or redistributing the layout file itself is prohibited.