MoreTailwindTips.tsx

import React from "react";
import { FiArrowRight, FiAward, FiUser } from "react-icons/fi";

export const MoreTailwindStuff = () => {
  return (
    <div className="grid h-screen place-content-center bg-neutral-100">
      <SizeExample />
      {/* <GroupExample /> */}
      {/* <PeerExample /> */}
      {/* <RingExample /> */}
      {/* <PluginsExample /> */}
    </div>
  );
};

const SizeExample = () => {
  return (
    <div className="grid size-12 place-content-center bg-indigo-600 text-white">
      <FiAward />
    </div>
  );
};

const GroupExample = () => {
  return (
    <div className="group flex w-96 items-center justify-between rounded border border-neutral-400 bg-white p-2">
      <div className="flex items-center gap-2">
        <div className="grid size-12 place-content-center rounded-full bg-neutral-900 text-xl text-neutral-50">
          <FiUser />
        </div>
        <span className="opacity-0 transition-opacity group-hover:opacity-100">
          @tomisloading
        </span>
      </div>
      <button className="group/follow flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-white shadow-lg transition-all hover:-translate-y-0.5 active:translate-y-0 active:bg-indigo-700 active:shadow-inner">
        Follow
        <FiArrowRight className="transition-transform group-hover/follow:-rotate-45 group-active/follow:rotate-0" />
      </button>
    </div>
  );
};

const PeerExample = () => {
  return (
    <form className="flex w-80 items-center justify-between rounded border border-neutral-400 bg-white p-4">
      <label className="relative block w-full">
        <input
          type="email"
          className="peer w-full rounded border border-neutral-500 p-2 text-sm focus:border-indigo-500 focus:outline-none"
        />
        <span className="absolute left-2 top-0 -translate-y-1/2 scale-100 bg-white px-0.5 text-xs font-medium transition-transform peer-focus:scale-0">
          Email
        </span>
      </label>
    </form>
  );
};

const RingExample = () => {
  return (
    <form className="flex w-80 items-center justify-between rounded border border-neutral-400 bg-white p-4">
      <label className="relative block w-full">
        <input
          type="email"
          className="peer w-full rounded border border-neutral-500 p-2 text-sm ring-1 ring-neutral-500/0 ring-offset-0 transition-shadow focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 focus:ring-offset-2"
        />
        <span className="absolute left-2 top-0 -translate-y-1/2 scale-100 bg-white px-0.5 text-xs font-medium transition-transform peer-focus:scale-0">
          Email
        </span>
      </label>
    </form>
  );
};

const PluginsExample = () => {
  /**
    ...rest of config
    plugins: [
        function ({ matchUtilities, theme }) {
        matchUtilities(
            {
            "bg-grid": (value) => ({
                backgroundImage: `url("${svgToDataUri(
                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke-width="2" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
                )}")`,
            }),
            },
            { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
        );
        },
    ],
     */
  return (
    <div className="flex min-h-64 w-96 rounded border border-neutral-400 bg-white p-4 bg-grid-neutral-200"></div>
  );
};