npm install -D @tailwindcss/forms

<form> <div class="mb-6"> <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label> <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 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" placeholder="[email protected]" required> </div> <div class="mb-6"> <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label> <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 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" required> </div> <div class="flex items-start mb-6"> <div class="flex items-center h-5"> <input id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 bg-gray-50 rounded border border-gray-300 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required> </div> <div class="ml-3 text-sm"> <label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label> </div> </div> <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
</form>

<div class="w-full max-w-xs"> <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> <div class="mb-4"> <label class="block text-gray-700 text-sm font-bold mb-2" for="username"> Username </label> <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username"> </div> <div class="mb-6"> <label class="block text-gray-700 text-sm font-bold mb-2" for="password"> Password </label> <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************"> <p class="text-red-500 text-xs italic">Please choose a password.</p> </div> <div class="flex items-center justify-between"> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button"> Sign In </button> <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#"> Forgot Password? </a> </div> </form> <p class="text-center text-gray-500 text-xs"> &copy;2020 Acme Corp. All rights reserved. </p>
</div>

<form class="w-full max-w-sm"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/3"> <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name"> Full Name </label> </div> <div class="md:w-2/3"> <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-full-name" type="text" value="Jane Doe"> </div> </div> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/3"> <label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-password"> Password </label> </div> <div class="md:w-2/3"> <input class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="inline-password" type="password" placeholder="******************"> </div> </div> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/3"></div> <label class="md:w-2/3 block text-gray-500 font-bold"> <input class="mr-2 leading-tight" type="checkbox"> <span class="text-sm"> Send me your newsletter! </span> </label> </div> <div class="md:flex md:items-center"> <div class="md:w-1/3"></div> <div class="md:w-2/3"> <button class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button"> Sign Up </button> </div> </div>
</form>

{"tags":[{"tag":"textarea","content":"<input type=\"email\" class=\"form-input px-4 py-3 rounded-full\">\n\n<select class=\"form-select px-4 py-3 rounded-full\">\n <!-- ... -->\n<\/select>\n\n<input type=\"checkbox\" class=\"form-checkbox rounded text-pink-500\" \/>","code_language":"whatever"}]}