tesseract/showcases/web-kitchensink-reactnext/src/components/Brand/index.tsx

import * as React from 'react';

export const Brand = ({
  platform,
  version,
}) => {
  switch (platform) {
    case 'react':
      return (
        <span className="relative font-headings block lowercase leading-none">
          <span className="relative -top-2 text-3xl font-semibold">
            Tesseract
          </span>
          {' '}
          <span className="absolute left-4 top-4 font-semibold">
            Web
          </span>
          {' '}
          <span className="ml-1 font-semibold relative text-lg -top-2">
            <span className="sr-only">(</span>
            React
            <span className="sr-only">)</span>
          </span>
          {version && (
            <>
              {' '}
              <span className="absolute right-0 top-4 font-black text-xs">
                v.{version}
              </span>
            </>
          )}
        </span>
      );
    default:
      break;
  }

  return (
    <span className="relative font-headings block lowercase leading-none">
      <span className="text-3xl font-semibold">
        Tesseract
      </span>
    </span>
  )
};