add usage example

README.md

@@ -6,13 +6,13 @@ It uses real svg under the hood what provide the maximum flexibility.
 
 # Setup
 
-for the tailwind v4 use: 
+for the tailwind v4 use this in your css file: 
 ```css
 @import "tailwindcss";
 @plugin "tailwind-dashed-border"; 
 ```
 
-then prepare a component for svg, or copy this shape everywhere you want to use it.
+then prepare a component for svg in case you don't want repeat yourself everywhere. I will show it as it would look in React, but similar approach should work in any framework.
 
 ```tsx
 export function BorderSVG() {
@@ -32,11 +32,28 @@ and now you are ready to make your borders
 </div>
 ```
 
-# Usage 
+# Usage Example
 
+```tsx
+<div
+  className="
+    px-14 py-10 bg-purple-900 rounded-2xl text-2xl
 
+    dashed-border dashed-border-width-5 dashed-border-color-orange-600
+    dashed-border-align-edge
+    duration-300 ease-in-out transition-all
+    dashed-border-gap-0 dashed-border-length-9
+    hover:dashed-border-gap-3 hover:dashed-border-length-6 
+    dashed-border-offset-2.5 hover:dashed-border-offset-1
+    "
+>
+  <DashedBorderSvg />
+  <div>Content</div>
+</div>
+```
+![output](./assets/example.webp)
 
-# Properties
+# Plugin Properties
 
 ## Setup
 - `dashed-border`