JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Without template tag</h1>
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="number" />
<input type="text" />


<h1>With template tag</h1>
<div id="type-tester"></div>

<template id="test1">
<div>
    <input type="date" />
    <input type="time" />
    <input type="datetime-local" />
    <input type="number" />
    <input type="text" />
</div>
</template>

JavaScript

var template = document.getElementById('test1');
var clone = template.content.cloneNode(true);

// Workaround
//var div = document.createElement('div');
//div.innerHTML = template.innerHTML;
//clone = div.firstElementChild;

var inputDate = clone.querySelector('input[type=date]');
var inputTime = clone.querySelector('input[type=time]');
var inputDatetime = clone.querySelector('input[type=datetime-local]');
var inputNumber = clone.querySelector('input[type=number]');
var inputText = clone.querySelector('input[type=text]');

document.body.appendChild(clone);

var tester = document.getElementById('type-tester');
tester.textContent = 'Types; date=' + inputDate.type + ', time=' + inputTime.type + ', datetime=' + inputDatetime.type + ', number=' + inputNumber.type + ', text=' + inputText.type;