React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

npm install --save tailwindcss postcss autoprefixer

  <ul class="p-2">
    <li>
      <div>
        <b>Honest Burgers</b>
        <p>Known for their exquisite dumplings and Taiwanese cuisine, Din Tai Fung has locations worldwide and is celebrated for its consistent quality and taste.s</p>
        <a class="text-blue-400" href="https://www.tripadvisor.com/Restaurant_Review-g186338-d10496258-Reviews-Honest_Burgers-London_England.html">Honest Burgers</a>
      </div>
    </li>
    <li>
      <div>
        <b>Honest Burgers</b>
        <p>Known for their exquisite dumplings and Taiwanese cuisine, Din Tai Fung has locations worldwide and is celebrated for its consistent quality and taste.s</p>
        <a class="text-blue-400" href="https://www.tripadvisor.com/Restaurant_Review-g186338-d10496258-Reviews-Honest_Burgers-London_England.html">Honest Burgers</a>
      </div>
    </li>
  </ul>
  <p>Enjoy exploring these burger places and satisfy your craving for a tasty burger! 🍔</p>

</div>

                <div className="fixed flex right-8 bottom-24">
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0 scale-95"
                        enterTo="opacity-100 scale-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100 scale-100"
                        leaveTo="opacity-0 scale-95"
                    >
                        <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">

                            <Dialog.Title
                                as="h3"
                                className="text-lg font-medium  text-gray-900"
                            >
                                Amex Chatbot
                            </Dialog.Title>

                            <div className=" max-h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100 bg-pink-700">
                                <ConversationWindow />
                                <ConversationWindow />
                            </div>

                            <div className="mt-4 bg-red-500">
                                <input type="text" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Chat..." />
                            </div>

                        </Dialog.Panel>
                    </Transition.Child>
                </div>
            </Dialog>
        </Transition>