Full width tabs example doesn't match label and ul

[shinokada]

An example given for a Full width tabs has a div tag with countries and ul has dashboard etc.

1. Do you need the div tag?
2. Shouldn't Options and ul content match?

<div class="sm:hidden">
    <label for="tabs" class="sr-only">Select your country</label>
    <select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm: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">
        <option>Profile</option>
        <option>Canada</option>
        <option>France</option>
        <option>Germany</option>
    </select>
</div>
<ul class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
    <li class="w-full">
        <a href="#" class="inline-block p-4 w-full text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white" aria-current="page">Profile</a>
    </li>
    <li class="w-full">
        <a href="#" class="inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">Dashboard</a>
    </li>
    <li class="w-full">
        <a href="#" class="inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">Settings</a>
    </li>
    <li class="w-full">
        <a href="#" class="inline-block p-4 w-full bg-white rounded-r-lg hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">Invoice</a>
    </li>
</ul>

[abidra]

1. I think you need the div tag because it's the wrapper for sm -> small device. So the content inside the div will be shown on the small device only
2. In the demo, the content is different. Because you have an option whether you want to make the content equal both for desktop and mobile or make it different.
3. The label Select your country does not show because there's an sr-only class.

[shinokada]

@abidra Yes, I understand all your points. But my main point is that country names in options and the list (Profile, Dashboard, etc.) are nothing to do each other. So I'm suggesting to update them to make sense.

[abidra]

@shinokada yeah, you are right, it's will make sense.

[ankur655]

I came upon this example and was wondering how to use the "select" with the options to control the displayed tab for small devices. Could you please elaborate either here or in the doc itself? Thanks.

[zoltanszogyenyi]

The difference between countries and dashboard have been fixed for the v2.3 update. Thanks!