Neo-Brutalist People Card

cards

High-contrast neo-brutalist team profile card with bold borders and offset shadows.

#card#people#brutalist#bold#social#team

Live Interactive Preview

Head of Design#01

Marcus Thorne

Design Systems Lead

Crafting high-impact neo-brutalist interfaces & scalable design tokens for web applications.

Component Source Code

Select language in the dropdown

BrutalistPeopleCard.tsx

1'use client';
2
3import React from 'react';
4import { FaGithub, FaLinkedin, FaXTwitter, FaDribbble } from 'react-icons/fa6';
5import { Sparkles } from 'lucide-react';
6
7export default function BrutalistPeopleCard() {
8  return (
9    <div className="w-full max-w-xs sm:max-w-sm rounded-2xl border-3 border-slate-900 dark:border-slate-100 bg-amber-300 dark:bg-slate-900 p-6 shadow-[6px_6px_0px_0px_#000] dark:shadow-[6px_6px_0px_0px_#fff] text-slate-900 dark:text-slate-100 transition-all">
10      <div className="flex items-center justify-between mb-4">
11        <span className="inline-flex items-center gap-1 rounded-lg border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 px-2.5 py-0.5 text-[10px] font-black uppercase tracking-wider text-slate-900 dark:text-slate-100">
12          <Sparkles className="h-3 w-3 text-amber-500" /> Head of Design
13        </span>
14        <span className="text-xs font-black font-mono">#01</span>
15      </div>
16
17      <div className="flex items-center gap-4 mb-4">
18        <div className="h-16 w-16 shrink-0 rounded-2xl border-3 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 flex items-center justify-center font-black text-2xl text-slate-900 dark:text-slate-100 shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff]">
19          MT
20        </div>
21        <div>
22          <h3 className="text-lg font-black tracking-tight text-slate-900 dark:text-slate-100">Marcus Thorne</h3>
23          <p className="text-xs font-bold text-slate-700 dark:text-slate-300">Design Systems Lead</p>
24        </div>
25      </div>
26
27      <p className="text-xs font-bold leading-relaxed text-slate-800 dark:text-slate-300 mb-5">
28        Crafting high-impact neo-brutalist interfaces &amp; scalable design tokens for web applications.
29      </p>
30
31      <div className="grid grid-cols-4 gap-2 pt-2 border-t-2 border-slate-900 dark:border-slate-100">
32        <a
33          href="https://github.com"
34          target="_blank"
35          rel="noreferrer"
36          className="flex items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 p-2.5 text-slate-900 dark:text-slate-100 font-black shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 transition"
37          aria-label="GitHub"
38        >
39          <FaGithub className="h-4 w-4" />
40        </a>
41        <a
42          href="https://linkedin.com"
43          target="_blank"
44          rel="noreferrer"
45          className="flex items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 p-2.5 text-slate-900 dark:text-slate-100 font-black shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 transition"
46          aria-label="LinkedIn"
47        >
48          <FaLinkedin className="h-4 w-4" />
49        </a>
50        <a
51          href="https://twitter.com"
52          target="_blank"
53          rel="noreferrer"
54          className="flex items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 p-2.5 text-slate-900 dark:text-slate-100 font-black shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 transition"
55          aria-label="Twitter"
56        >
57          <FaXTwitter className="h-4 w-4" />
58        </a>
59        <a
60          href="https://dribbble.com"
61          target="_blank"
62          rel="noreferrer"
63          className="flex items-center justify-center rounded-xl border-2 border-slate-900 dark:border-slate-100 bg-rose-400 p-2.5 text-slate-900 font-black shadow-[2px_2px_0px_0px_#000] dark:shadow-[2px_2px_0px_0px_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 transition"
64          aria-label="Dribbble"
65        >
66          <FaDribbble className="h-4 w-4" />
67        </a>
68      </div>
69    </div>
70  );
71}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/BrutalistPeopleCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import NeoBrutalistPeopleCard from '@/components/cards/BrutalistPeopleCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <NeoBrutalistPeopleCard />
7    </main>
8  );
9}