Why does my timepicker do not work using React and Tailwind CSS?

Question

I tried to use that timepicker using React.js and Tailwind CSS :

https://tailwind-elements.com/docs/standard/forms/timepicker/

The code was the following :

<div class="flex justify-center">
  <div class="timepicker relative form-floating mb-3 xl:w-96">
    <input type="text"
      class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
      placeholder="Select a date" />
    <label for="floatingInput" class="text-gray-700">Select a time</label>
  </div>
</div>

But I cannot click on the timepicker to set the hour.

Here is my project :

My project

Could you help me please ?

Thnak you very much !

Answer 1

You need to install the correct dependency in the code sandbox.

Rather, if this is any project or part of it, I would suggest you work in the local environment and install the npm package by following these steps.

Secondly, if this is for illustration or learning purposes then you can use the tailwind-element snippet from here .