JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<h3>Ultimate 製品の登録</h3>
    <form>
        <div class="group-fields">
            <label for="serialNumber">製品番号</label>
            <input id="serialNumber"></input>
        </div>
        <div class="group-fields">
            <label for="zipCode">郵便番号</label>
            <input id="zipCode"></input>
        </div>
        <div class="group-fields">
            <label for="phone">電話番号</label>
            <input id="phone"></input>
        </div>
    </form>

CSS

h3 {
            font-size:20px;
            margin-bottom:20px;
        }
        .group-fields {
            margin-bottom: 10px;
        }
        .group-fields label {
            display: block;
            line-height:18px;
        }
        .group-fields .ui-igedit-container {
            width: 300px;
        }
        @media screen and (max-width:360px) {
            .group-fields .ui-igedit-container {
                width: 250px;
            }
        }

JavaScript

$(function () {
            $("#serialNumber").igMaskEditor({
                inputMask: 'AAAA-AAAA-AAAA-AAAA',
                dataMode: "rawTextWithLiterals"
            });

            $("#zipCode").igMaskEditor({
                inputMask: '00000',
                dataMode: "allText"
            });

            $("#phone").igMaskEditor({
                inputMask: '(000) 000-000',
                dataMode: "rawText"
            });
        });