Typography Components

import { H1 } from '@ogxjs/react';

<H1 tw="text-white">Main Heading</H1>

import { H2 } from '@ogxjs/react';

<H2 tw="text-zinc-300">Subheading</H2>

import { P } from '@ogxjs/react';

<P>This is a paragraph with default styling.</P>

import { Span } from '@ogxjs/react';

<Span tw="text-sm text-zinc-500">Small text</Span>

import { Stack, Row, H1, H2, P } from '@ogxjs/react';

const BlogCard = () => (
  <Stack tw="w-full h-full bg-zinc-950 p-16 gap-6">
    <Row tw="gap-2">
      <span tw="text-indigo-400 text-sm font-medium">TUTORIAL</span>
      <span tw="text-zinc-600">•</span>
      <span tw="text-zinc-500 text-sm">5 min read</span>
    </Row>
    
    <H1 tw="text-white">Building OG Images with React</H1>
    
    <P tw="text-zinc-400 text-xl">
      Learn how to create beautiful Open Graph images using 
      familiar JSX syntax and Tailwind classes.
    </P>
    
    <Row tw="gap-3 items-center mt-auto">
      <img src="/avatar.png" tw="w-12 h-12 rounded-full" />
      <Stack tw="gap-0">
        <span tw="text-white font-medium">John Doe</span>
        <span tw="text-zinc-500 text-sm">@johndoe</span>
      </Stack>
    </Row>
  </Stack>
);