Email verified

import { buttonClass, Card, CardActions, CardDescription, CardHeader, Icon } from '@pelatform/react';

export function Example() {
  return (
    <div className="grid min-h-dvh place-items-center bg-base-200 p-6">
      <div className="flex w-full max-w-sm flex-col gap-6">
        <a className="flex items-center gap-2 self-center font-medium" href="#">
          <span className="grid size-8 place-items-center rounded-lg bg-primary text-primary-content">
            <Icon name="stack-2" className="size-5" />
          </span>
          Pelatform
        </a>
        <Card>
          <CardHeader className="text-center">
            <span className="mx-auto grid size-10 place-items-center rounded-lg bg-success/10 text-xl text-success">
              <Icon name="check" />
            </span>
            <h1 className="card-title text-xl">Email verified</h1>
            <CardDescription><strong>john@example.com</strong> is verified, and your account is ready.</CardDescription>
          </CardHeader>
          <CardActions className="flex-col">
            <a className={`${buttonClass({ color: 'primary' })} w-full`} href="#">Continue to dashboard</a>
          </CardActions>
        </Card>
      </div>
    </div>
  );
}

import { buttonClass, Card, CardActions, CardDescription, CardHeader, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <div className="plf:grid plf:min-h-dvh plf:place-items-center plf:bg-base-200 plf:p-6">
      <div className="plf:flex plf:w-full plf:max-w-sm plf:flex-col plf:gap-6">
        <a className="plf:flex plf:items-center plf:gap-2 plf:self-center plf:font-medium" href="#">
          <span className="plf:grid plf:size-8 plf:place-items-center plf:rounded-lg plf:bg-primary plf:text-primary-content">
            <Icon name="stack-2" className="plf:size-5" />
          </span>
          Pelatform
        </a>
        <Card>
          <CardHeader className="plf:text-center">
            <span className="plf:mx-auto plf:grid plf:size-10 plf:place-items-center plf:rounded-lg plf:bg-success/10 plf:text-xl plf:text-success">
              <Icon name="check" />
            </span>
            <h1 className="plf:card-title plf:text-xl">Email verified</h1>
            <CardDescription><strong>john@example.com</strong> is verified, and your account is ready.</CardDescription>
          </CardHeader>
          <CardActions className="plf:flex-col">
            <a className={`${buttonClass({ color: 'primary' })} plf:w-full`} href="#">Continue to dashboard</a>
          </CardActions>
        </Card>
      </div>
    </div>
  );
}