Dropdown Card

<div class="pt-12 pb-12 h-screen bg-gray-50">

    <div class="mx-auto max-w-sm bg-white shadow-2xl">
        <div class="px-6 py-8">

            <p class="text-2xl font-bold">
                Select a Search Engine
            </p>
            <p class="font-semibold text-gray-600 mt-4 mb-4">
                The dropdown menu below will redirect the page to the URL associated with the selected option
            </p>

            <div class="inline-block relative w-64">

                <select id="selectElement" class="block w-full appearance-none bg-gray-100 text-gray-500 border border-gray-300 hover:border-gray-400 px-4 py-3 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline">
                    <option selected disabled>Please select</option>
                    <option value="https://bing.com">Bing</option>
                    <option value="https://google.com">Google</option>
                    <option value="https://www.ecosia.org/?c=en">Ecosia</option>
                </select>

                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                </div>
            </div>

        </div>

    </div>

</div>

<script>
    let selectElement = document.querySelector('#selectElement');
    selectElement.addEventListener('change', (event) => {
        window.open(event.target.value, '_top');
    })
</script>