Fix code snippet

Author: philipp-spiess

src/blog/vanilla-js-support-for-tailwind-plus/index.mdx

@@ -85,28 +85,40 @@ And here's what it looks like to build a [custom select](https://tailwindcss.com
 
 {/* prettier-ignore */}
 ```html
+<label for="select" class="block text-sm/6 font-medium text-gray-900">Assigned to</label>
 <!-- [!code highlight:2] -->
-<el-dropdown class="relative inline-block text-left">
-  <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50">
-    Options
-    <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
-      <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
+<el-select id="select" name="selected" value="4" class="mt-2 block">
+  <button type="button" class="grid w-full cursor-default grid-cols-1 ...">
+    <!-- [!code highlight:2] -->
+    <el-selectedcontent></el-selectedcontent>
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="col-start-1 row-start-1 ...">
+      <!-- ... -->
     </svg>
   </button>
 
   <!-- [!code highlight:2] -->
-  <el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(2)] focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">
-    <div class="py-1">
-      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Account settings</a>
-      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Support</a>
-      <a href="#" class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">License</a>
-      <form action="#" method="POST">
-        <button type="submit" class="block w-full px-4 py-2 text-left text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">Sign out</button>
-      </form>
-    </div>
-    <!-- [!code highlight:3] -->
-  </el-menu>
-</el-dropdown>
+  <el-options anchor="bottom start" popover class="max-h-60 w-(--button-width) [--anchor-gap:--spacing(1)] ...">
+      <!-- [!code highlight:2] -->
+    <el-option value="1" class="group/option relative block focus:bg-indigo-600 ...">
+      <div class="flex items-center">
+        <span aria-hidden="true" class="inline-block size-2 shrink-0 ..."></span>
+        <span class="ml-3 block group-aria-selected/option:font-semibold ...">
+          Wade Cooper
+          <span class="sr-only"> is online</span>
+        </span>
+      </div>
+      <span class="group-not-aria-selected/option:hidden group-focus/option:text-white in-[el-selectedcontent]:hidden ...">
+        <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true" class="size-5">
+            <!-- ... -->
+        </svg>
+      </span>
+      <!-- [!code highlight:2] -->
+    </el-option>
+    <!-- ... -->
+    <!-- [!code highlight:2] -->
+  </el-options>
+  <!-- [!code highlight:2] -->
+</el-select>
 ```
 
 See those custom HTML elements like `<el-select>` and `<el-options>`? Those are the secret sauce that make everything work, including automatic ARIA attribute management, focus handling, keyboard support, and more.