Section
Feature Grid — Neo-Brutalism
Brutalist marketing feature grid with a bold uppercase section heading, six hard-bordered feature cards with offset drop shadows, rotating flat accent icon tiles, a highlighted featured card with a New badge, press-down hover states, and a staggered entrance animation that respects prefers-reduced-motion.
- Section
- Tailwind
- HTML
- MIT
Preview
Live section
9:41 100%
devsnips.dev/library/tailwind/sections/marketing/feature-grid/neo-brutalism/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Sections/Marketing/feature-grid/neo-brutalism Tailwind/Sections/Marketing/feature-grid/neo-brutalism <!--
Snippet Name: Feature Grid — Neo-Brutalism
Description: Brutalist marketing feature grid — a bold section heading, six hard-bordered feature cards with offset shadows, rotating accent tiles, and press-down hover states.
Author: DevSnips Contributors
Usage Example: Drop into any landing-page shell to showcase product capabilities. Staggered entrance animation and reduced-motion guard are wired.
-->
<section class="relative w-full bg-[#FFFDF5] text-black" data-featuregrid="nb">
<div class="absolute inset-0 nb-grid-bg opacity-[0.05]" aria-hidden="true"></div>
<div class="relative mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20 lg:py-24">
<!-- Heading -->
<div class="fg-step max-w-2xl">
<span class="inline-block border-2 border-black bg-[#00C2FF] px-2 py-0.5 font-mono text-[11px] font-bold uppercase tracking-wider shadow-[2px_2px_0_0_#000]">Marketing / Features</span>
<h2 class="mt-5 font-archivo text-4xl font-extrabold uppercase leading-[0.95] tracking-tight sm:text-5xl">
Everything you need<br>
to <span class="bg-black px-2 text-[#FFE600]">ship faster.</span>
</h2>
<p class="mt-5 max-w-xl font-archivo text-base font-medium leading-relaxed text-black/70">
Six building blocks that take you from blank canvas to deployed landing page — no design system wrangling required.
</p>
</div>
<!-- Feature cards -->
<ul class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" role="list">
<!-- 1 -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-white p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]">
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#FFE600] text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">Instant Copy</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/70">Grab any section as a standalone snippet. Zero dependencies, zero build step, zero lock-in.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
<!-- 2 -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-white p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]">
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#FF4FA3] text-white shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><rect x="3" y="4" width="18" height="14" rx="0" /><path d="M3 9h18M8 4v5" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">Three Styles</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/70">Brutalist, Vercel-dark, or frosted glass. One component, three distinct looks from shared tokens.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
<!-- 3 — Featured -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-[#00E676] p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]" aria-label="Featured feature">
<span class="absolute right-4 top-4 border-2 border-black bg-black px-2 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-[#FFE600]">New</span>
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-black text-[#FFE600] shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M4 17V9a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8" /><path d="M4 13h16" /><circle cx="8" cy="20" r="1.4" fill="currentColor" stroke="none" /><circle cx="16" cy="20" r="1.4" fill="currentColor" stroke="none" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">AI Tailwindgen</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/80">Describe a section, get production-ready markup tuned to your chosen style. Edit by hand anytime.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
<!-- 4 -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-white p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]">
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#00C2FF] text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9" /><path d="M12 3v9l6 3" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">Real Perf</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/70">No runtime CSS, no JS framework. Just HTML, Tailwind, and a few lines of vanilla script.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
<!-- 5 -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-white p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]">
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#FFE600] text-black shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2 4-4" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">A11y First</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/70">Semantic landmarks, ARIA where needed, visible focus rings, and full keyboard support out of the box.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
<!-- 6 -->
<li class="fg-step">
<article class="group relative h-full border-2 border-black bg-white p-6 shadow-[6px_6px_0_0_#000] transition-transform duration-100 hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0_0_#000] focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-[2px_2px_0_0_#000]">
<div class="flex h-12 w-12 items-center justify-center border-2 border-black bg-[#FF4FA3] text-white shadow-[3px_3px_0_0_#000] transition-transform duration-100 group-hover:-translate-y-[2px] group-hover:translate-x-[-2px] group-hover:shadow-[1px_1px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h10" /></svg>
</div>
<h3 class="mt-5 font-archivo text-xl font-extrabold uppercase leading-tight tracking-tight">Responsive</h3>
<p class="mt-2 font-archivo text-[15px] font-medium leading-relaxed text-black/70">Mobile-first grids that stack to one column and scale cleanly to wide desktops. No layout jank.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 font-mono text-[11px] font-bold uppercase tracking-wider underline decoration-2 underline-offset-2 hover:text-[#FF4FA3] focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">Learn more →</a>
</article>
</li>
</ul>
</div>
<style>
[data-featuregrid] .nb-grid-bg {
background-image:
linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #000 1px, transparent 1px);
background-size: 28px 28px;
}
[data-featuregrid] .fg-step { opacity: 0; transform: translateY(14px); }
[data-featuregrid].fg-ready .fg-step { animation: nb-rise 0.55s cubic-bezier(.2,.7,.2,1) forwards; }
[data-featuregrid].fg-ready .fg-step:nth-child(1) { animation-delay: 0.05s; }
[data-featuregrid].fg-ready .fg-step:nth-child(2) { animation-delay: 0.13s; }
[data-featuregrid].fg-ready .fg-step:nth-child(3) { animation-delay: 0.21s; }
[data-featuregrid].fg-ready .fg-step:nth-child(4) { animation-delay: 0.29s; }
[data-featuregrid].fg-ready .fg-step:nth-child(5) { animation-delay: 0.37s; }
[data-featuregrid].fg-ready .fg-step:nth-child(6) { animation-delay: 0.45s; }
@keyframes nb-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
[data-featuregrid] .fg-step { animation: none !important; opacity: 1 !important; transform: none !important; }
}
</style>
<script>
(function () {
var root = document.currentScript.closest('[data-featuregrid]');
if (!root) return;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce) { root.classList.add('fg-ready'); return; }
requestAnimationFrame(function () { root.classList.add('fg-ready'); });
})();
</script>
</section> 133 lines UTF-8 · LF · Spaces: 2
Continue browsing