Bios | ContentNomad
// Drop-in React component for a big, wide, "swaggy" headline + setup notes // Works with Tailwind + shadcn. Uses free, readable display fonts. /* ---- Add these <link> tags once (e.g., in index.html <head> or your app layout) ---- <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet"/> */ /* ---- Tailwind config (tailwind.config.ts) ---- export default { theme: { extend: { fontFamily: { display: ["Syne", "system-ui", "sans-serif"], sans: ["Space Grotesk", "system-ui", "sans-serif"], }, }, }, } */ import React from "react"; export default function SwaggyTagline() { return ( <div className="mx-auto max-w-6xl px-4 py-8"> {/* HEADLINE */} <h1 className="font-display text-5xl md:text-7xl xl:text-8xl font-extrabold leading-[0.9] tracking-[0.06em] uppercase" style={{ // Adds an extended vibe without distortion; supported by modern browsers