-1

I've been making a password input box, however when I put it into my JS code it comes with the error in the title. Here's my code: (This is in TailwindCSS too)

function HomePage() {
  return (
    <div>
      <p className="text-center text-green-600">Welcome to Next.js a!</p>
    </div>
    <div class=" relative ">
      <label for="with-indications" class="text-gray-700">
        Password
        <span class="text-red-500 required-dot">
          *
        </span>
      </label>
      <input type="text" id="with-indications" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="passwor" placeholder="Password" />
      <div class="grid w-full h-1 grid-cols-12 gap-4 mt-3">
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
        </div>
      </div>
      <div class="mt-2 text-green-500">
        Valid password
      </div>
    </div>
  )
}
  
export default HomePage
Phil
  • 157,677
  • 23
  • 242
  • 245
xCo_re
  • 1
  • 2
  • 2
    Is there something unclear about the error message? You can only return a single top-level element. You are returning two top-levels divs – Phil Nov 28 '21 at 23:24

1 Answers1

1

You are returning 2 divs at the top level. Use a fragment or another container element as wrapper:

<React.Fragment>
  <div>...</div>
  <div>...</div>
</React.Fragment>
Antonio Pantano
  • 4,592
  • 2
  • 23
  • 26