Preview:
<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>
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