Demo Output HTML SCSS JS Label Name: Select Options Option 1 Option 2 Option 3 Error message <div class="mb-4"> <label for="contactStuff" class="inline-block mb-2">Label Name:</label> <div class="relative"> <select id="contactStuff" name="contactType" class="appearance-none w-full border border-gray rounded-md focus:ring-royal-blue px-4 py-3 placeholder-gray-dark text-gray-darkest transition duration-150 ease-in-out sm:leading-5 required" required=""> <option value="">Select Options</option> <option value="">Option 1</option> <option value="">Option 2</option> <option value="">Option 3</option> </select> <div class="pointer-events-none absolute right-0 inset-y-0 flex items-center px-4 text-grey-darker"> <svg class="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"></path></svg> </div> </div> <div class="color-red-error mt-1 text-sm hidden">Error message</div> </div> /* HSW components use Tailwind! Individual utility classes are added to the HTML. */ No JS! 😀 Anatomy Select Select Label Select Option Select Icon/Chevron
