JSFiddle - React, Tailwind, and code Playground
HTML
<div class="detail-cont">
<h5>유지보수 위탁업체 개요</h5>
<a id="btn_add" href="#" class="btn_add_black">유지보수 위탁업체 추가</a>
<table class="tbl_form">
<caption class="Hidden">유지보수 위탁업체 개요</caption>
<tbody>
<tr>
<th rowspan="2">위탁부문</th>
<th rowspan="2">위탁업체명</th>
<th rowspan="2">업체대표</th>
<th rowspan="2">업체 위치</th>
<th rowspan="2">위탁부문</th>
<th rowspan="2">조직도</th>
<th colspan="2">계약기간</th>
</tr>
<tr>
<th>계약시작일</th>
<th>계약종료일</th>
</tr>
</tbody>
<tbody id="sample_item_wrap">
<tr class="tr_item sample">
<td>
<div class="d_flex">
<input type="text" class="align_l" placeholder="위탁부문" maxlength="20">
</div>
</td>
<td>
<div class="d_flex">
<input type="text" class="align_l" placeholder="위탁업체명" maxlength="20">
</div>
</td>
<td>
<div class="d_flex">
<input type="text" class="align_l" placeholder="업체대표" maxlength="20">
</div>
</td>
<td>
<div class="d_flex">
<input type="text" class="align_l" placeholder="업체 위치" maxlength="20">
</div>
</td>
<td>
<div class="d_flex">
<input type="text" class="align_l" placeholder="위탁부문" maxlength="20">
</div>
</td>
<td>
<div class="file_up">
<input type="text" class="w_100" placeholder="파일을 선택해주세요">
<label class="gray_btn">파일선택<input type="file"></label>
</div>
<ul class="file_list">
<li><a href="#" class="list_name">20200709_조직도.jpg</a> <a href="#" class="btn_del"><span>삭제</span></a></li>
</ul>
</td>
<td>
<input...
CSS
.tbl_form {border-top:1px solid #B9B9B9; border-left:1px solid #B9B9B9; font-size:13px;}
.tbl_form tbody th {background:#E5E5E5; border-right:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; font-weight:normal;}
.tbl_form tbody td {background:#fff; border-right:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:3px;}
.tbl_form tbody td input[type="text"] {width:100%; height:100%; background:#fff; border:1px solid #E2E2E2; padding:0 5px; border-radius:3px;}
.tbl_form tbody td input[type="text"]:disabled {height:100%; background:#F8F8F8; border:1px solid #E2E2E2; padding:0 5px; border-radius:3px;}
.tbl_form tbody td input[type="date"] {height:100%; background:#fff; border:1px solid #E2E2E2; padding:0 5px; border-radius:3px;}
.d_flex {display:flex;}
.d_flex span {padding:0 10px;}
.d_flex a {padding:0 10px;}
.d_flex input[type="button"] {background:#333; padding:0 5px; border-radius:3px; color:#fff; margin-left:5px; padding:0 10px;}
.d_flex label.file {position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; color:#fff; text-align:center; background:#333; border-radius:3px; color:#fff; margin-left:5px; width:70px;}
.d_flex label.file input {position:absolute; width:0; height:0; overflow:hidden;}
/* 추가 버튼 */
.btn_add_white {border:1px solid #666; border-radius:5px; background:#fff url(../images/sub/ico_add_black.png) no-repeat 10px 50%; padding:5px 10px 5px 25px; font-size:13px; color:#333; line-height:14px; position:absolute; top:-3px; right:0;}
.btn_add_black {background:#666 url(../images/sub/ico_add_white.png) no-repeat 10px 50%; padding:0 10px 0 25px; font-size:13px; color:#fff; line-height:35px; position:absolute; top:0; right:0;}
JavaScript
// datepicker
$('body').on('focus', ".datepick", function() {
$(this).datepicker({
buttonImage: "${ctx }/resources/plugins/jquery-ui-1.12.1/images/calendar.png",
});
})
$("#btn_add").click(function(e) {
e.preventDefault();
var $item = $("#sample_item_wrap .tr_item.sample").clone().removeClass('sample');
$item.find("input").val("");
$("#list_wrap").append($item);
})