Box

import { Box } from "@adaptui/react-tailwind";

export const App = (props) => {
  return (
    <Box className="space-x-4">
      <Box as="a" href="#">
        Link
      </Box>
      <Box as={Button}>AdaptUI Button</Box>
    </Box>
  );
};

import { Box } from "@adaptui/react-tailwind";

export const App = (props) => {
  return (
    <Box
      as="figure"
      className={tcm("overflow-hidden rounded-xl bg-gray-100 p-8")}
    >
      <Box
        as="img"
        className="mx-auto h-32 w-32 rounded-full object-cover md:h-auto md:w-48 md:rounded-md"
        src="https://tailwindcss.com/_next/static/media/sarah-dayan.de9b3815.jpg"
        alt="Image of a women"
        width="384"
        height="512"
      />
      <Box className="space-y-4 pt-6 text-center md:p-8 md:text-left">
        <Box as="blockquote">
          <Box as="p" className="text-lg font-semibold">
            “Tailwind CSS is the only framework that I've seen scale on large
            teams. It easy to customize, adapts to any design, and the build
            size is tiny.”
          </Box>
        </Box>
        <Box as="figcaption" className="font-medium">
          <Box className="text-cyan-600">Sarah Dayan</Box>
          <Box className="text-gray-500">Staff Engineer, Algolia</Box>
        </Box>
      </Box>
    </Box>
  );
};

import { Box } from "@adaptui/react-tailwind";

export const App = (props) => {
  return (
    <Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
        <Box as="dt" className="text-sm font-medium text-gray-600 truncate">
          Total Subscribers
        </Box>
        <Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
          71,897
        </Box>
      </Box>
      <Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-md sm:p-6">
        <Box as="dt" className="text-sm font-medium text-gray-600 truncate">
          Avg. Open Rate
        </Box>
        <Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
          58.16%
        </Box>
      </Box>
    </Box>
  );
};