import { Field, Input, Label } from '@headlessui/react'

const SquareWithLblCode = () => {
  return (
    <div>
      <div>
        <Field className='w-full mb-3'>
          <Label className='mb-2 block text-ld'>Name</Label>
          <Input
            type='text'
            className='ui-form-control rounded-md py-2.5 px-3 w-full'
            name='full_name'
          />
        </Field>
        <Field className='w-full mb-3'>
          <Label className='mb-2 block text-ld'>Email</Label>
          <Input
            type='email'
            className='ui-form-control rounded-md py-2.5 px-3 w-full'
            name='full_name'
          />
        </Field>
        <Field className='w-full '>
          <Label className='mb-2 block text-ld'>Password</Label>
          <Input
            type='password'
            className='ui-form-control rounded-md py-2.5 px-3 w-full'
            name='full_name'
          />
        </Field>
      </div>
    </div>
  )
}

export default SquareWithLblCode

import { Description, Field, Input, Label } from '@headlessui/react'

const InputWithDescriptionCode = () => {
  return (
    <div>
      <div>
        <Field className='w-full mb-3'>
          <Label className='mb-1 block text-ld'>Name</Label>
          <Description className='text-darklink text-xs'>
            Use your real name so people will recognize you.
          </Description>
          <Input
            type='text'
            className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
            name='full_name'
          />
        </Field>
        <Field className='w-full mb-3'>
          <Label className='mb-1 block text-ld'>Email</Label>
          <Description className='text-darklink text-xs'>
            Use your real Email so people will recognize you.
          </Description>
          <Input
            type='email'
            className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
            name='full_name'
          />
        </Field>
        <Field className='w-full '>
          <Label className='mb-1 block text-ld'>Password</Label>
          <Description className='text-darklink text-xs'>
            Use your real Password so people will recognize you.
          </Description>
          <Input
            type='password'
            className='ui-form-control rounded-md py-2.5 px-3 w-full mt-2'
            name='full_name'
          />
        </Field>
      </div>
    </div>
  )
}

export default InputWithDescriptionCode