JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<form class="well form-horizontal">
    <fieldset>
        <legend>html5 form features</legend>
        
        <div class="form-actions">
            <input type="submit" class="btn btn-primary" value="submit" />
        </div>
        
        <div class="control-group">
            <label class="control-label" for="text">required text input</label>
            <div class="controls">
                <input class="input-large" id="text" name="text" type="text" placeholder="required text input" value="" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="email">required email input</label>
            <div class="controls">
                <input class="input-large" id="email" name="email" type="email" placeholder="required email input" value="" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="url">required url input</label>
            <div class="controls">
                <input class="input-large" id="url" name="url" type="url" placeholder="required url input" value="" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="tel">required tel input</label>
            <div class="controls">
                <input class="input-large" id="tel" name="tel" type="tel" placeholder="required tel input" value="" required />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="date">required date input</label>
            <div class="controls">
                <input class="input-large" id="date" name="date" type="date" placeholder="required date input" value="" required />
            </div>
        </div>
        <div class="control-group">
            <label...