Full Stack Unicorn

The latest and the greatest designs. Right here.

Tailwind Country Dropdown

Founder

at Full Stack Unicorn

Craft a responsive Tailwind CSS carousel with ease. This tutorial walks you through image carousel setup, utilizing Tailwind's classes for efficiency. Perfect for all skill levels, it delivers a polished, functional result quickly.

Source Code

<head>  <link rel="stylesheet" href="output.css"> </head> <style> * { transition: 0.1s; } .hovcard { background-color: white; color: black; border: none; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.045); font-family: sans-serif; padding: 1em; display: inline-block; } .hovcard:hover { background-color: whitesmoke; color: black; } .hovcard:focus { background-color: rgb(219, 219, 219); } .hovcard li { list-style: none; text-align: left; } button.hovcard::after { margin-left: 4px; content: ""; height: 16px; width: 16px; /* background-color: pink; */ background-image: url('downarrow.svg'); background-repeat: no-repeat; vertical-align: middle; display: inline-block; transform: scale(0.8); /* position: absolute; */ } .dropdownoptions { background-color: white; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.045); } .dropdownoptions li { padding: 1em; padding-top: 0.5em; padding-bottom: 0.5em; } .dropdown { text-align: left; } .dropdownoptions li:hover { background-color: rgba(0, 0, 0, 0.023); } /* .dropdownoptions li img */ .dropdown img { margin-right: 8px; } .dropdown:hover .dropdownoptions { display: block; position: absolute; } .dropdownoptions { display: none; position: absolute; /* left: 0px; */ /* top: 50px; */ } </style> <body class="mt-32"> <div class="max-w-md m-auto"> <div class="dropdown inline-block"> <button id="cdrop" class="focus:ring hovcard rounded-lg inline-block" type="button"> Country Flags </button> <ul class="dropdownoptions absolute rounded-lg overflow-auto max-h-48 p-2"> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/us.svg" width="32"> <div class="align-middle inline-block"> USA </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/gb.svg" width="32"> <div class="align-middle inline-block"> England </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/br.svg" width="32"> <div class="align-middle inline-block"> Brazil </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/us.svg" width="32"> <div class="align-middle inline-block"> USA </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/gb.svg" width="32"> <div class="align-middle inline-block"> England </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/br.svg" width="32"> <div class="align-middle inline-block"> Brazil </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/us.svg" width="32"> <div class="align-middle inline-block"> USA </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/gb.svg" width="32"> <div class="align-middle inline-block"> England </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/br.svg" width="32"> <div class="align-middle inline-block"> Brazil </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/us.svg" width="32"> <div class="align-middle inline-block"> USA </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/gb.svg" width="32"> <div class="align-middle inline-block"> England </div> </li> <li class="hover:ring cursor-pointer rounded-lg" onclick="update_country(this);"> <img class="rounded inline-block align-middle" src="flags/br.svg" width="32"> <div class="align-middle inline-block"> Brazil </div> </li> </ul> </div> <input class="hidden" name="country" type="text"> </div> <script> var country = document.getElementsByName("country")[0]; var cdrop = document.querySelector("#cdrop"); function update_country(el) { country.value = el.innerText; cdrop.innerHTML = el.innerHTML; } </script> </body> </html>