<div class="d-flex flex-col"> <label class="input-label-required text-sm" for="email">Email</label> <input type="text" class="text-input w-100 p-3 text-sm" placeholder="abc@gmail.com" required /> </div> <div class="d-flex flex-col"> <label class="text-sm" for="name">Name</label> <input type="text" class="text-input w-100 p-3 text-sm" placeholder="Enter your name" required /> </div> <div class="d-flex flex-col"> <label class="input-label-required text-sm" for="password">Password</label> <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Enter your password" required /> </div> <div class="input-grp-err d-flex flex-col"> <label class="input-label-required text-sm" for="confirm-password">Confirm Password</label> <input type="password" class="text-input w-100 p-3 text-sm" placeholder="Re-enter password" required /> <span class="text-sm">Passwords not matched. Try Again</span> </div> <div class="d-flex flex-col"> <label class="text-sm" for="country">Country</label> <input type="text" class="text-input text-sm w-100 p-3" name="country" value="India" readonly /> </div> <div class="d-flex flex-col"> <label class="text-sm" for="address">Enter Your Address</label> <textarea type="text" class="text-area w-100 p-3 text-sm" placeholder="Enter address here" rows="3"></textarea> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter