devsnips
Search docs, APIs, guides…

Section

SaaS Feature Grid — Neo-Brutalism

Brutalist 6-up feature grid with hard black borders, rotating bright accent panels, numbered monospace tags, offset shadows, and a zig-zag offset layout. Each card has a thick icon tile, a punchy feature title, and a body line. Press-down hover states animate the shadow.

  • Section
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • 6-up feature grid
  • Rotating bright accent panels
  • Numbered monospace tags
  • Zig-zag offset layout
  • Thick icon tiles
  • Offset shadows
  • Press-down hover states

Preview

Live section

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/sections/saas/feature-grid/neo-brutalism/
fluid · no fixed width 100%
Dependencies: Tailwind CSS (CDN) · Google Fonts: Archivo, JetBrains Mono Responsive

Install

Add to your project

terminal
npx devsnips add Tailwind/Sections/SaaS/feature-grid/neo-brutalism
registry path: Tailwind/Sections/SaaS/feature-grid/neo-brutalism

Source

Implementation

code.html 
<!--
Snippet Name: SaaS Feature Grid — Neo-Brutalism
Description: Brutalist 6-up feature grid with hard borders, rotating bright accent panels, numbered tags, and offset shadows.
Author: DevSnips Contributors
Usage Example: Drop into a product features section. Reorder features or swap accent colors per card.
-->
<section class="relative w-full px-5 py-16 sm:px-8 sm:py-24" data-features="nb">

  <div class="mx-auto max-w-6xl">

    <!-- Section header -->
    <div class="mb-12 flex flex-col items-start justify-between gap-6 border-b-4 border-black pb-8 sm:flex-row sm:items-end">
      <div>
        <span class="border-2 border-black bg-[#00C2FF] px-2.5 py-1 font-mono text-[11px] font-bold uppercase tracking-wider shadow-[3px_3px_0_0_#000]">/ features</span>
        <h2 class="font-archivo mt-5 text-[40px] font-extrabold uppercase leading-[0.95] tracking-tight sm:text-[56px]">
          Everything<br>your team needs.
        </h2>
      </div>
      <p class="max-w-sm font-mono text-[13px] font-medium leading-relaxed text-black/70">
        Six pillars that turn a messy inbox into a system. No plugins. No yearly upgrades.
        Built in from day one.
      </p>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      <!-- card template -->
      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FFE600] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M22 2 12 12"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">01</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">AI triage</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Auto-routes every ticket to the right team and drafts a reply in under 3 seconds.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FF4FA3] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">02</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">SLA engine</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Per-plan SLAs with breach alerts and automatic escalation to on-call engineers.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#00E676] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">03</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Live insights</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Realtime dashboards for volume, CSAT, and tag trends — exportable to CSV in one click.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#00C2FF] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">04</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Audit logs</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Tamper-evidence logs for every action, streamed to your SIEM via secure webhook.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000]">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-black shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7 text-[#FFE600]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="0"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">05</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Enterprise SSO</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">SAML + SCIM provisioning for Okta, Entra, and Google Workspace out of the box.</p>
      </article>

      <article class="group border-2 border-black bg-white p-6 shadow-[8px_8px_0_0_#000] transition-transform duration-100 hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-[2px_2px_0_0_#000] sm:translate-y-6">
        <div class="flex items-center justify-between">
          <div class="flex h-14 w-14 items-center justify-center border-2 border-black bg-[#FFE600] shadow-[3px_3px_0_0_#000]">
            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h10"/></svg>
          </div>
          <span class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/40">06</span>
        </div>
        <h3 class="font-archivo mt-5 text-xl font-extrabold uppercase leading-tight">Workflow builder</h3>
        <p class="font-mono mt-2 text-[12px] font-medium leading-relaxed text-black/70">Drag-and-drop automations that branch on intent, sentiment, and customer tier.</p>
      </article>
    </div>

    <!-- footer CTA strip -->
    <div class="mt-12 flex flex-col items-start justify-between gap-4 border-2 border-black bg-black p-6 sm:flex-row sm:items-center">
      <p class="font-archivo text-xl font-extrabold uppercase text-white sm:text-2xl">Want the full tour?</p>
      <a href="#" class="inline-flex items-center gap-2 border-2 border-black bg-[#FFE600] px-5 py-3 font-mono text-[12px] font-bold uppercase shadow-[4px_4px_0_0_#FF4FA3] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[1px_1px_0_0_#FF4FA3]">
        Book a 20-min call
        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
      </a>
    </div>
  </div>
</section>
104 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this section straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://sections/saas/feature-grid/neo-brutalism
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/sections/saas/feature-grid/neo-brutalism/

Install: npx devsnips add
Tailwind/Sections/SaaS/feature-grid/neo-brutalism

This is the SaaS Feature Grid — Neo-Brutalism — Brutalist 6-up feature grid with hard black borders, rotating bright accent panels, numbered monospace tags, offset shadows, and a zig-zag offset layout. Each card has a thick icon tile, a punchy feature title, and a body line. Press-down hover states animate the shadow.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://sections/saas/feature-grid/neo-brutalism