Input groups example issues

[phamduylong]

Link to the Page

https://next.skeleton.dev/docs/tailwind/forms#groups

Describe the Issue (screenshots encouraged!)

The code in the example imports icons from lucide-react and seems to be written in JSX but it's using class instead of className.

---
import { CircleDollarSign, Check, Search } from 'lucide-react';
---

<form class="mx-auto w-full max-w-md space-y-8">
  {/* Website */}
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell preset-tonal-surface">https://</div>
    <input type="text" placeholder="www.example.com" />
  </div>
  {/* Amount */}
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell preset-tonal-surface">
      <CircleDollarSign size={16} />
    </div>
    <input type="text" placeholder="Amount" />
    <select>
      <option>USD</option>
      <option>CAD</option>
      <option>EURO</option>
    </select>
  </div>
  {/* Username */}
  <div class="input-group divide-surface-200-800 grid-cols-[1fr_auto] divide-x">
    <input type="text" placeholder="Enter Username..." />
    <button class="btn preset-filled" title="Username already in use.">
      <Check size={16} />
    </button>
  </div>
  {/* Search */}
  <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
    <div class="input-group-cell">
      <Search size={16} />
    </div>
    <input type="search" placeholder="Search..." />
    <button class="btn preset-filled">Submit</button>
  </div>
</form>

[phamduylong]

@endigo9740 I spotted this when testing for #2985 so I'll probably will throw a PR for both, that is if I can fix #2985