JSFiddle - React, Tailwind, and code Playground

by novikov433

HTML

<style>
        body {
            text-align: center;
            font-family: "Segoe UI", Ubuntu, "Droid Sans", sans-serif;
        }

        form, table {
            text-align: left;
            margin: auto;
        }

        form {
            padding: 2mm;
            border-radius: 2mm;
            width: 12cm;
            background-color: rgba(0, 166, 255, 0.1);
        }

        button {
            background-color: rgba(0, 166, 255, 0.3);
        }

        button, input, select {
            border-radius: 1mm;
        }

        form, button, input, select {
            border: 1px solid #808080;
        }

        form {
            border-width: 2px;
        }

        form > div {
            display: table-row;
        }

        form > div > div {
            display: table-cell;
            vertical-align: middle;
            padding: 1mm 2mm;
        }

        #credit span {
            color: rgb(160,160,160);
        }

        input {
            width: 16mm;
            padding-left: 1mm;
        }

        button, select {
            width: 24mm;
        }

        button {
            margin: 2mm 1mm 1mm 1mm;
        }

        #buttons {
            display: block;
            text-align: right;
        }

        table {
            border-collapse: collapse;
            text-align: right;
            margin-top: 4mm;
        }

        table td, table th {
            border: 1px solid black;
            padding: 1mm 2mm;
        }

        table span {
            color: rgb(160,160,160);
        }
    </style>

<form id="credit">
    <div>
        <div>Размер кредита</div>
        <div><input id="amount" type="number" min="100" max="500000" pattern="[0-9]{2,5}"
            required title="Введите сумму кредита"/></div>
        <div>грн</div>
    </div>
    <div>
        <div>Процентная ставка по кредиту</div>
        <div><input id="interest" type="text" pattern="[0-9]{1,2}([\.\,][0-9]{1,2})?"
            required...