Problem with using interactive UI components in Flowbit

Question

At https://flowbite.com/docs/components/tabs/#example there are three sections about JavaScript code. Where should I add JavaScript codes? I added these codes in a file called admin.js to my project. But the line:

import { Tabs } from 'flowbite';

It encounters an error (Uncaught SyntaxError: Cannot use import statement outside a module).

I think I'm adding the js codes to the project in the wrong way or something else because it's not working for me.

This is what I did: create admin.js file, Copy the javascript codes related to the tabs component from the site in the same order as they are on tabs example (https://flowbite.com/docs/components/tabs/#example) to admin.js, call admin.js at the end of admin.html file.

Is there anything else I need to do? For example, should I introduce the admin.js file in tailwind.config.js? (Of course, I did this) or should I enter a special command in the terminal to activate the features related to JavaScript (interactive UI components)? Or add a file to the project? I don't know what I missed.

admin.js:

const tabsElement = document.getElementById('tabs-example');

// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements = [
    {
        id: 'profile',
        triggerEl: document.querySelector('#profile-tab-example'),
        targetEl: document.querySelector('#profile-example')
    },
    {
        id: 'dashboard',
        triggerEl: document.querySelector('#dashboard-tab-example'),
        targetEl: document.querySelector('#dashboard-example')
    },
    {
        id: 'settings',
        triggerEl: document.querySelector('#settings-tab-example'),
        targetEl: document.querySelector('#settings-example')
    },
    {
        id: 'contacts',
        triggerEl: document.querySelector('#contacts-tab-example'),
        targetEl: document.querySelector('#contacts-example')
    }
];

// options with default values
const options = {
    defaultTabId: 'settings',
    activeClasses: 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',
    inactiveClasses: 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
    onShow: () => {
        console.log('tab is shown');
    }
};

import { Tabs } from 'flowbite';

/*
* tabElements: array of tab objects
* options: optional
*/
const tabs = new Tabs(tabsElement, tabElements, options);

// shows another tab element
tabs.show('dashboard');

// get the tab object based on ID
tabs.getTab('contacts')

// get the current active tab object
tabs.getActiveTab()