// Stack on mobile, row on md+
<div className="flex flex-col gap-4 md:flex-row md:items-center">
  <img className="w-full md:w-48 md:shrink-0" src={src} />
  <div className="space-y-2">
    <h2 className="text-xl font-bold md:text-2xl">{title}</h2>
    <p className="text-gray-600">{description}</p>
  </div>
</div>

<button className="bg-blue-500 hover:bg-blue-600 focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 active:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50">
  Click me
</button>

// Parent hover affects child
<a href="#" className="group block p-4 hover:bg-gray-50">
  <h3 className="text-gray-900 group-hover:text-blue-600">Title</h3>
  <p className="text-gray-500 group-hover:text-gray-700">Description</p>
</a>

// Sibling state affects element
<label>
  <input type="checkbox" className="peer sr-only" />
  <span className="block p-4 border peer-checked:border-blue-500 peer-checked:bg-blue-50">
    Option
  </span>
</label>

<div className="@container">
  <div className="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    {/* Responds to container width, not viewport */}
  </div>
</div>

<div className="rounded-xl bg-white p-6 shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
    {title}
  </h3>
  <p className="mt-2 text-gray-600 dark:text-gray-400">{description}</p>
</div>

<input
  type="text"
  className="block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none disabled:bg-gray-50 disabled:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500"
  placeholder="Enter text..."
/>

const badgeVariants = {
  default: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
  success:
    "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
  warning:
    "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
  error: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
};

<span
  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${badgeVariants[variant]}`}
>
  {label}
</span>;

<img
  src={src}
  alt={name}
  className="size-10 rounded-full ring-2 ring-white dark:ring-gray-800"
/>;

{
  /* Avatar with fallback initials */
}
<div className="flex size-10 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
  {initials}
</div>;

<div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />

<div className="absolute right-0 mt-2 w-48 origin-top-right rounded-lg bg-white py-1 shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
  <a
    href="#"
    className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
  >
    Option
  </a>
</div>

<div className="bg-black/50">     {/* 50% opacity */}
<div className="bg-blue-500/75">  {/* 75% opacity */}
<div className="ring-white/10">   {/* 10% opacity */}

<div className="top-[117px] grid-cols-[1fr_500px_2fr] bg-[#1da1f2]">

<div className="bg-(--my-color) text-(--my-text-color)">