<div> <div class="input-container"> <label for="name">Name</label> <input type="text" placeholder="Enter name" class="input-default" name="name" /> <span>Default Message</span> </div> <div class="input-container"> <label for="email">Email</label> <input type="email" placeholder="Enter Email" class="input-fail" name="email" /> <span class="text-fail">Error Message</span> </div> <div class="input-container"> <label for="password">Password</label> <input type="password" placeholder="Password" class="input-success" name="password" /> <span class="text-success">Success Message</span> </div> </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