add deprecated banner

Author: RobinMalfait

README.md

@@ -1,3 +1,9 @@
+<p align="center">
+  <h1 align="center">⚠️ Deprecated: use <a href="https://github.com/tailwindlabs/headlessui/">Headless UI</a> instead ⚠️</h1>
+</p>
+
+---
+
 # @tailwindui/vue
 
 **This project is still in a pre-alpha state and could change dramatically at any time. Not for production.**
@@ -38,17 +44,26 @@ Basic example:
         :value="wrestler"
         v-slot="{ isActive, isSelected }"
       >
-        <div class="p-3" :class="isActive ? 'bg-blue-600 text-white' : 'bg-white text-gray-900'">
+        <div
+          class="p-3"
+          :class="isActive ? 'bg-blue-600 text-white' : 'bg-white text-gray-900'"
+        >
           {{ wrestler }}
-          <img v-show="isSelected" src="/checkmark.svg">
+          <img v-show="isSelected" src="/checkmark.svg" />
         </div>
       </ListboxOption>
     </ListboxList>
   </Listbox>
 </template>
 
 <script>
-  import { Listbox, ListboxLabel, ListboxButton, ListboxList, ListboxOption } from '@tailwindui/vue'
+  import {
+    Listbox,
+    ListboxLabel,
+    ListboxButton,
+    ListboxList,
+    ListboxOption,
+  } from "@tailwindui/vue";
 
   export default {
     components: {
@@ -60,20 +75,20 @@ Basic example:
     },
     data() {
       return {
-        selectedWrestler: 'The Ultimate Warrior',
+        selectedWrestler: "The Ultimate Warrior",
         wrestlers: [
-          'The Ultimate Warrior',
-          'Randy Savage',
-          'Hulk Hogan',
-          'Bret Hart',
-          'The Undertaker',
-          'Mr. Perfect',
-          'Ted DiBiase',
-          'Bam Bam Bigelow',
-          'Yokozuna',
-        ]
-      }
-    }
-  }
+          "The Ultimate Warrior",
+          "Randy Savage",
+          "Hulk Hogan",
+          "Bret Hart",
+          "The Undertaker",
+          "Mr. Perfect",
+          "Ted DiBiase",
+          "Bam Bam Bigelow",
+          "Yokozuna",
+        ],
+      };
+    },
+  };
 </script>
 ```