JSFiddle - React, Tailwind, and code Playground

by Vesko22

HTML

<body>
    <h2>Check</h2>
    <hr />
    
    <div>
        <div>
            <form asp-action="Create">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="table-style">
                    <table class="table table-my">
                        <tbody>
                            <tr >
                                <td id="border-none" colspan="2">
                                    <div class="form-group group-my">
                                        <label asp-for="EmployeeCode" class="control-label">Emplyee Code</label>
                                        <input asp-for="EmployeeCode" class="form-control input-active short" />
                                        <span asp-validation-for="EmployeeCode" class="text-danger"></span>
                                    </div>
                                </td>
                            </tr>
                            <tr >
                                <td id="border-mid">
                                    <div class="form-group group-my">
                                        <label asp-for="ProductCode" class="control-label">Product Code</label>
                                        <input asp-for="ProductCode" id="code" class="form-control input-active" placeholder="" />
                                        <span asp-validation-for="ProductCode" class="text-danger"></span>
                                    </div>
                                </td>
                                <td id="border-mid">
                                    <div class="form-group group-my">
                                        <label asp-for="Description" class="control-label">Description</label>
                                        <input asp-for="Description" id="materialCode" class="form-control disabled input-inactive" disabled placeholder="" />
                                        <span asp-validation-for="Description"...

CSS

body {
    font-family: Verdana;
}

label {
    white-space: normal;
    text-shadow: 0 0 1px #303030;
}

td {
    padding: 0 !important;
    margin: 6px 0;
}

#border-none {
    border-top: none !important;
}

#border-mid {
    border: none;
    border: 2px 0 groove rgba(180, 180, 180, 0.8);
}

/* Styling the table itself */
.table-style {
    border-radius: 2rem;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 7px 0px #a0a0a0;
    margin-bottom: 0;
    font-size: 20px;
}

.table-my {
    margin-bottom: 0 !important;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

/* Styling of the div in each cell */
.group-my {
    box-shadow: 0 0 5px 0 black;
    background-color: rgba(220, 220, 220, 0.3);
    border-radius: 22px;
    padding: 8px;
    margin: 8px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: flex-start;
}

/* Styling the input fields */
.input-active {
    border: none;
    border-radius: 1rem;
    width: 100%;
    box-shadow: 0 0 5px 2px #606060;
}

.input-active:focus {
    box-shadow: inset 0 0 5px 2px red;
}

.input-inactive {
    border: none;
    border-radius: 1rem;
    width: 100%;
    box-shadow: 0 0 5px 2px #606060;
}

.short {
    margin-left: 1rem;
    max-width: 100px;
}

/* styling the Confirm button */
.btn-align {
    display: flex;
    justify-content:center;
}

.btn-save {
    width: 200px;
    height: 50px;
    font-size: 1.25rem;
    font-weight: 500;
    color: #f0f0f0;
    background-color: #ff3030;
    border: 2px solid #cc0000;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.btn-save:hover {
    color: #f0f0f0;
    background-color: #ff6060;
    border-color: #cc0000;
    transition: background-color 0.3s cubic-bezier(0.21, 0.54, 0.5, 1);
}

.btn-save:active {
    color: #f0f0f0 !important;
    background-color: #ff6060 !important;
    border-color: #cc0000 !important;
}