JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div class="b-card-payment">
    <div class="b-payment-info">
        <div class="payment-sum">
            <span class="info-label">Сумма платежа:</span>
            <span class="info-value">455</span>
            <span class="info-currency">руб.</span>
        </div>
        <div class="payment-order">
            <span class="info-label">Номер заказа:</span>
            <span class="info-value">174661729</span>
        </div>
    </div>
    <div class="payment-form">
        <form action="" method="post" class="card-form" autocomplete="off" autocorrect="off" autocapitalize="off" formnovalidate>
            <div class="card">
                <div class="card-control card-number">
                    <div class="card-input__wrapper">
                        <input type="text" id="card_number" name="card_number" class="card-input" placeholder="Номер банковской карты" value="" />
                        <span class="input-error">Неправильнно указан номер карты</span>
                    </div>
                </div>
                <div class="card-control card-holder">
                    <div class="card-input__wrapper">
                        <input type="text" id="card_holder" name="card_holder" class="card-input" placeholder="Имя держателя" value="" />
                        <span class="input-error">Неправильно указано имя владельца карты</span>
                    </div>
                </div>
                <div class="card-control card-month">
                    <div class="card-input__wrapper">
                        <select class="card-select" name="card_month" id="card_month_select">
                            <option value="">MM</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                  ...

CSS

/*
    reset css
*/
 html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
th, td {
    vertical-align: top;
}
ol, ul, menu {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* normalize */
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    margin: 0;
    display: block;
}
[hidden] {
    display: none;
}
html {
    font-family: sans-serif;
    font-weight: normal;
}
body {
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: normal;
}
button, textarea, select, input:focus, input:active, a:active, a:focus, a:hover {
    outline: 0;
}
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
button, input, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}
html, body, button, input {
    line-height: normal;
    padding: 0;
    border: 0;
}
textarea, input, button {
    -webkit-appearance: none;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="search"] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="file"]::-webkit-file-upload-button {
    padding: 0;
    -webkit-appearance: none;
    margin: 0;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
input::-ms-clear {
    display: none;
}
/*
    Layout
*/
 body {
    background: #e4eaee;
   ...

JavaScript

(function() {
    var CARD_MONTH_SELECT_NODE = document.getElementById('card_month_select'),
        CARD_YEAR_SELECT_NODE = document.getElementById('card_year_select'),
        CARD_NUMBER_NODE = document.getElementById('card_number'),
        CARD_CVV_NODE = document.getElementById('card_cvv');
    
    function selectFocusHandler() {
        var firstElementChild = this.firstElementChild;
        
        if (!firstElementChild) {
            firstElementChild = this.firstChild;
            while (firstElementChild.nodeType !== 1 && (firstElementChild = firstElementChild.nextSibling)) {};
        }
        
        if (!firstElementChild.value) {
            this.removeChild(firstElementChild);
            this.parentNode.className += ' card-select__used';
        }
        
    }
    
    function numberFocusHandler(event) {
        var eventType = event.type,
            value = this.value;
        
        if (value) {
            return;
        }
        
        if (eventType === 'focusin') {
            this.type = 'number';
        } else if (eventType === 'focusout') {
            this.type = 'text';
        }
        
    }
    
    CARD_YEAR_SELECT_NODE.addEventListener('focusin', selectFocusHandler, false);
    CARD_MONTH_SELECT_NODE.addEventListener('focusin', selectFocusHandler, false);
    
    CARD_NUMBER_NODE.addEventListener('focusin', numberFocusHandler, false);
    CARD_CVV_NODE.addEventListener('focusin', numberFocusHandler, false);
    CARD_NUMBER_NODE.addEventListener('focusout', numberFocusHandler, false);
    CARD_CVV_NODE.addEventListener('focusout', numberFocusHandler, false);
    
})();