JSFiddle - React, Tailwind, and code Playground

by Rosi Ramoreez

HTML

<!DOCTYPE html>
<html>
<body>
    <h3> HTML 5 FOR INPUT TYPE</h3>
    <p>&nbsp;</p>
    <b>1. Input Type: color</b> <br>Select your favorite color: <input type="color" name="favcolor" /><br /> 
    <p>&nbsp;</p>
    <b>2. Input Type: Date</b> <br> Birthday: <input type="date" name="bday" /><br />
    <p>&nbsp;</p>
    <b>3. Input Type: Email</b> <br> E-mail: <input type="email" name="usremail" /><br />
    <p>&nbsp;</p>
    <b>4. Input Type: number</b> <br> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" /><br />
    <p>&nbsp;</p>
    <b>5. Input Type: Range</b> <br> Points: <input type="range" name="points" min="1" max="10" /><br />
    <p>&nbsp;</p>
    <b>6. Input Type: URL</b> <br> Add your homepage: <input type="url" name="homepage" /><br />
    <p>&nbsp;</p>
    <b>7. Input Type: DATE</b> <br> Birthday: <input type="date" name="bday" /><br />
    <p>&nbsp;</p>
    
    <h3> HTML 5 FOR INPUT ATTRIBUTE</h3>
    <b>1. Input Attribute: Placeholder</b> 
    <br> Kalo dulu saya pake JQuery Watermark sekrang cukup HTML5 <br><input type="text" name="fname" placeholder="First name" /><br />
  <input type="text" name="lname" placeholder="Last name" /><br />
    <p>&nbsp;</p>
    <b>2. Input Attribute: Pattern</b> 
    <br> Kalo dulu saya pake javascript atau php sekrang cukup HTML5 <br>
    <form action="#">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code" />
  <input type="submit" />
</form>
    <p>&nbsp;</p>
    <b>3. Input Attribute: Autofocus</b> 
    <br> Kalo dulu saya pake javascript/JQuery sekrang cukup HTML5 <br> First name:<input type="text" name="fname" autofocus="autofocus" /><br />
    <p>&nbsp;</p>
    <b>4. Input Attribute: Required</b> 
    <form action="#">
Username: <input type="text" name="usrname" required="required" />
<input type="submit" />
</form>
    <p>&nbsp;</p>
    <h3> HTML 5 FORM ELEMENT</h3>
    <p>&nbsp;</p>
    <b>1. HTML5 <*datalist>...

CSS

h3{font-size:24px;font-weight:700;margin-bottom:10px}