Interactive preview, sandboxed: nothing you type leaves this page.
import "@fontsource/newsreader/latin-400.css";import "@fontsource/inter/latin-400.css";import "@fontsource/inter/latin-500.css";import "@fontsource/ibm-plex-mono/latin-400.css";import "@fontsource/ibm-plex-mono/latin-500.css";import "./block.css";const kpis = [ { label: "Revenue", value: "$48.2M", kind: "money" }, { label: "Operating Margin", value: "17.6%", kind: "percent" }, { label: "Product Margin", value: "72.0%", kind: "percent" }, { label: "SG&A Costs", value: "$19.6M", kind: "money" }, { label: "EBITDA", value: "$9.7M", kind: "money" },];const monetary = [ { label: "Revenue", value: 48.2, shown: "$48.2M" }, { label: "SG&A Costs", value: 19.6, shown: "$19.6M" }, { label: "EBITDA", value: 9.7, shown: "$9.7M" },];const margins = [ { label: "Operating Margin", value: 17.6 }, { label: "Product Margin", value: 72.0 },];export default function Block() { return ( <section className="fin-root bg-white text-slate-900 dark:bg-neutral-950 dark:text-neutral-100"> <div className="mx-auto max-w-[1240px] px-6 py-10 sm:px-10 sm:py-14 lg:px-14 lg:py-16"> <header className="mb-9 flex flex-col gap-5 border-b border-slate-200 pb-7 dark:border-neutral-800 sm:mb-10 sm:flex-row sm:items-end sm:justify-between sm:gap-8 sm:pb-8"> <div> <p className="type-mono mb-3 text-[11px] font-medium uppercase tracking-[0.13em] text-blue-800 dark:text-blue-300"> EJEMPLO HIPOTĆTICO Ā· FY2024 </p> <h1 className="type-display text-[34px] leading-[1.08] tracking-[-0.025em] sm:text-[42px]"> Financial overview </h1> </div> <div className="max-w-[310px] text-sm leading-5 text-slate-600 dark:text-neutral-300 sm:text-right"> <p className="font-medium text-slate-800 dark:text-neutral-200">USD millones</p> <p>Valores ilustrativos; no son resultados reales.</p> </div> </header> <section aria-label="Key financial indicators"> <h2 className="sr-only">Key financial indicators</h2> <dl className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5"> {kpis.map((item, index) => ( <div key={item.label} className={`min-w-0 border-slate-200 py-5 dark:border-neutral-800 ${ index < 4 ? "border-b" : "" } ${index % 2 === 0 ? "pr-4" : "pl-4"} sm:border-b sm:px-5 sm:first:pl-0 sm:last:pr-0 lg:border-b-0 lg:border-l lg:px-5 lg:first:border-l-0 lg:first:pl-0 lg:last:pr-0`} > <dt className="mb-3 min-h-[2.5rem] max-w-[140px] text-[13px] leading-[1.25rem] text-slate-600 dark:text-neutral-400 sm:min-h-0"> {item.label} </dt> <dd className="type-mono whitespace-nowrap text-[22px] leading-none tracking-[-0.045em] tabular-nums text-slate-950 dark:text-white sm:text-[23px]"> {item.value} </dd> </div> ))} </dl> </section> <div className="mt-10 grid gap-10 border-t border-slate-200 pt-8 dark:border-neutral-800 sm:mt-12 sm:pt-9 lg:grid-cols-[minmax(0,1.65fr)_minmax(260px,0.85fr)] lg:gap-14"> <section aria-labelledby="monetary-heading" className="min-w-0"> <div className="mb-7 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"> <h2 id="monetary-heading" className="text-[15px] font-medium tracking-[-0.01em]"> Selected monetary figures </h2> <p className="type-mono text-[11px] text-slate-500 dark:text-neutral-400">USD millions</p> </div> <div className="space-y-6" role="img" aria-label="Horizontal bar chart comparing Revenue at 48.2 million dollars, SG&A Costs at 19.6 million dollars, and EBITDA at 9.7 million dollars, on a scale from 0 to 50 million dollars."> {monetary.map((item) => ( <div key={item.label} className="grid grid-cols-[84px_minmax(0,1fr)_58px] items-center gap-3 sm:grid-cols-[112px_minmax(0,1fr)_66px] sm:gap-4"> <span className="text-[12px] leading-4 text-slate-700 dark:text-neutral-300 sm:text-[13px]">{item.label}</span> <div className="relative h-7 border-l border-slate-300 dark:border-neutral-700"> <div className="absolute inset-0 grid grid-cols-5" aria-hidden="true"> {[0, 1, 2, 3, 4].map((tick) => ( <span key={tick} className="border-r border-slate-200 dark:border-neutral-800" /> ))} </div> <div className="absolute left-0 top-[7px] h-[14px] bg-blue-800 dark:bg-blue-400" style={{ width: `${(item.value / 50) * 100}%` }} aria-hidden="true" /> </div> <span className="type-mono text-right text-[11px] tabular-nums text-slate-800 dark:text-neutral-200 sm:text-xs">{item.shown}</span> </div> ))} </div> <div className="mt-3 grid grid-cols-[84px_minmax(0,1fr)_58px] gap-3 sm:grid-cols-[112px_minmax(0,1fr)_66px] sm:gap-4"> <span aria-hidden="true" /> <div className="type-mono flex justify-between text-[10px] tabular-nums text-slate-500 dark:text-neutral-400" aria-label="Scale from zero to fifty million dollars"> {[0, 10, 20, 30, 40, 50].map((tick) => <span key={tick}>${tick}M</span>)} </div> <span aria-hidden="true" /> </div> <p className="mt-5 text-xs leading-5 text-slate-600 dark:text-neutral-400"> Shared linear scale from $0M to $50M. </p> </section> <section aria-labelledby="margin-heading" className="min-w-0 border-t border-slate-200 pt-8 dark:border-neutral-800 lg:border-l lg:border-t-0 lg:pl-10 lg:pt-0"> <div className="mb-7 flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1"> <h2 id="margin-heading" className="text-[15px] font-medium tracking-[-0.01em]">Margins</h2> <span className="type-mono text-[11px] text-slate-500 dark:text-neutral-400">Percent</span> </div> <div className="space-y-7" role="img" aria-label="Percentage bars on a zero to one hundred percent scale: Operating Margin 17.6 percent and Product Margin 72.0 percent."> {margins.map((item) => ( <div key={item.label}> <div className="mb-2 flex items-baseline justify-between gap-3"> <span className="text-[12px] leading-4 text-slate-700 dark:text-neutral-300">{item.label}</span> <span className="type-mono shrink-0 text-[13px] tabular-nums text-slate-900 dark:text-neutral-100">{item.value.toFixed(1)}%</span> </div> <div className="relative h-2 bg-slate-100 dark:bg-neutral-800" aria-hidden="true"> <div className="absolute inset-y-0 left-0 bg-blue-800 dark:bg-blue-400" style={{ width: `${item.value}%` }} /> </div> </div> ))} </div> <div className="type-mono mt-3 flex justify-between text-[10px] tabular-nums text-slate-500 dark:text-neutral-400" aria-hidden="true"> <span>0%</span><span>100%</span> </div> <p className="mt-5 text-xs leading-5 text-slate-600 dark:text-neutral-400">Separate percentage scale; not included in the monetary chart.</p> </section> </div> </div> </section> );}$ pnpm add @fontsource/inter@^5.3.0 @fontsource/newsreader@^5.3.0 @fontsource/ibm-plex-mono@^5.3.0