Add overflow-clip documentation example

Add dedicated example section demonstrating the overflow-clip utility,
showing the visual difference from overflow-hidden and explaining
the performance benefits.

Fixes #2246

Author: Ahmed-aleryani

src/docs/overflow.mdx

@@ -91,6 +91,38 @@ Use the `overflow-hidden` utility to clip any content within an element that ove
 
 </Figure>
 
+### Clipping content that overflows
+
+Use the `overflow-clip` utility to clip any content within an element that overflows the bounds of that element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative mx-auto flex max-w-sm items-center gap-6 overflow-clip rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800">
+      <img
+        className="absolute -left-6 h-24 w-24 rounded-full shadow-lg"
+        src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80"
+      />
+      <div className="flex flex-col py-5 pl-24">
+        <strong className="text-sm font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-clip] -->
+<div class="overflow-clip ...">
+  <!-- ... -->
+</div>
+```
+
+</Figure>
+
+Unlike `overflow-hidden`, `overflow-clip` doesn't create a new formatting context and may offer better performance in some cases.
+
 ### Scrolling if needed
 
 Use the `overflow-auto` utility to add scrollbars to an element in the event that its content overflows the bounds of that element: