Unable to open select the time for a timepicker using Tailwind CSS

Question

I saw that timepicker :

Timepicker CSS

So I tried to implement that, they told that the code is the following :

<div class="flex justify-center">
  <div class="timepicker relative form-floating mb-3 xl:w-96" data-mdb-with-icon="false" id="input-toggle-timepicker">
    <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" data-mdb-toggle="input-toggle-timepicker" />
    <label for="floatingInput" class="text-gray-700">Select a time</label>
  </div>
</div>

And I tried to implement that in a codesandbox code project :

My CodeSandBoxProject

with that code :

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

const App = () => {
  return (
    <div class="flex justify-center">
      <div
        class="timepicker relative form-floating mb-3 xl:w-96"
        data-mdb-with-icon="false"
        id="input-toggle-timepicker"
      >
        <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"
          data-mdb-toggle="input-toggle-timepicker"
        />
        <label for="floatingInput" class="text-gray-700">
          Select a time
        </label>
      </div>
    </div>
  );
};

export default App;

But When I click on the timepicker I got nothing instead of I should have that :

I don't understand why I do not get that. Could you help me please ?

Thank you very much !