JSFiddle - React, Tailwind, and code Playground
by xxxvvvxxx
HTML
<style>
.common_popup .custom_checkbox {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
font-size: 14px;
transform: translateX(-40px);
}
.common_popup .name_check {
margin: 0 10px;
padding-left: 32%;
box-sizing: border-box;
width: 700px;
}
.common_popup .center {
text-align: center;
}
.common_popup input[type="checkbox"] {
display: none;
}
.common_popup label {
line-height: 28px;
text-align: left;
cursor: pointer;
align-items: center;
justify-content: center;
display: flex;
}
.common_popup .checkmark {
float: left;
position: relative;
display: inline-block;
width: 28px;
height: 28px;
margin: 0 10px;
border: 1px solid #d6d6d6;
background: #f7f7f7;
box-sizing: border-box;
}
.common_popup .checktext {
height: 25px;
}
.common_popup .checkmark:before {
content: '';
position: absolute;
left: 6px;
top: 2px;
display: block;
width: 6px;
height: 12px;
border-right: 2px solid #adadad;
border-bottom: 2px solid #adadad;
transform-origin: center;
transform: rotate(45deg) translate3d(50%, 0, 0);
}
.common_popup input[type="checkbox"]:checked + label .checkmark:before {
border-right-color: #2c2c2c;
border-bottom-color: #2c2c2c;
}
</style>
<label for="popup2"><img src="./image/X.PNG" alt="X" /></label>
<h2 class="modal_title">상담, 신고하기</h2>
<hr class="modal_hr" />
<div class="modal_container_3 common_popup">
<p class="modal2_firstBox_text modal_item12">
기업윤리 신고센터는 펄어비스 임직원의 기업윤리 위반 사항에 대하여
</p>
<br />
<p class="modal2_firstBox_text modal_item13">
온라인으로 상담 및 신고를 하는 곳입니다.
</p>
<article class="modal_li_box">
<article class="first_second_ul">
<div class="first_ul" style="padding-top: 10px">
<h2 style="color: black; margin-left: 225px">신고 대상</h2>
<h4 style="color: black; padding-top: 20px; margin-left: 170px">
윤리강령 위반행위
...