JSFiddle - React, Tailwind, and code Playground

HTML

<h1>HTML Datepicker</h1>
<h2>Features</h2>
<ul>
    <li>Easy to read</li>
    <li>Easy to understand</li>
    <li>Accessible</li>
    <li>Keyboard compatible</li>
    <li>tab compatible (You can browse the fields with the tab key)</li>
    <li>Small (only one line of text)</li>
    <li>TouchEvents compatible</li>
    <li>Static (doesn't change position event the selected month have more days</li>
    <li>Starting week day agnostic (compatible with weeks starting on monday or on sunday)</li>
    <li><strong>450 bytes</strong> <span title="pbpaste | gzip | wc -c">with compression</span></li>        
</ul>
<h2>Example</h2>
<form>
<label>Day
<select name="user[calendar(1i)]">    
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</label>

<label>Month
<select id="user_calendar_2i" name="user[calendar(2i)]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option selected="selected" value="11">November</option>
<option value="12">December</option>
</select>
</label>
    
<label>Year
<select name="user[calendar(3i)]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option...

CSS

* {
    font-family: Arial;
    line-height: 20px;
}


p {
    margin-bottom: 20px;
}

li {
    line-height: 20px;
}
h1,h2 {
    margin-bottom: 10px;
    margin-top: 20px;
}

span {
    border-bottom: 1px dotted gray;
}

JavaScript

document.getElementById("code").innerHTML = escape(document.getElement("form").innerHTML;