Bootstrap to Tailwind
Convert css classes from Bootstrap to Tailwind.
Bootstrap
<form> <div class="form-group row"> <label for="staticEmail" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form>
Example 1
Example 2
Example 3
Example 4
Tailwind
<form> <div class="mb-4 flex flex-wrap "> <label for="staticEmail" class="sm:w-1/5 pr-4 pl-4 pt-2 pb-2 mb-0 leading-normal">Email</label> <div class="sm:w-4/5 pr-4 pl-4"> <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com"> </div> </div> <div class="mb-4 flex flex-wrap "> <label for="inputPassword" class="sm:w-1/5 pr-4 pl-4 pt-2 pb-2 mb-0 leading-normal">Password</label> <div class="sm:w-4/5 pr-4 pl-4"> <input type="password" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" id="inputPassword" placeholder="Password"> </div> </div> </form>