@xuda.io/xuda-framework-plugin-tailwind/dist/collection/Input/Inputs with inset labels and shared borders.htm

Xuda Tailwind UI Framework plugin

<div class='isolate -space-y-px rounded-md shadow-sm bg-white'>
  <div class='relative border border-gray-300 rounded-md rounded-b-none px-3 py-2 focus-within:z-10 focus-within:ring-1 focus-within:ring-indigo-600 focus-within:border-indigo-600'>
    <label for='name' class='block text-sm font-medium text-gray-900'>Name</label>
    <input type='text' name='name' id='name' class='block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm' placeholder='Jane Smith'>
  </div>
  <div class='relative border border-gray-300 rounded-md rounded-t-none px-3 py-2 focus-within:z-10 focus-within:ring-1 focus-within:ring-indigo-600 focus-within:border-indigo-600'>
    <label for='job-title' class='block text-sm font-medium text-gray-900'>Job Title</label>
    <input type='text' name='job-title' id='job-title' class='block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm' placeholder='Head of Tomfoolery'>
  </div>
</div>