JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="cont-box">
                                            <div class="glass-box">
                                                <div class="h-group">
                                                    <p class="tit">단기상시직(I-CAST)</p>
                                                    <p class="desc">연장근무O 주중근무O 주말근무O</p>
                                                </div>
                                                <ul class="info-bullet-list">
                                                    <li>일 9시간(휴게시간)</li>
                                                    <li>주 5일 근무</li>
                                                    <li>
                                                        <p>2개월 ~ 6개월 근무정보</p>
                                                        <p>(파크 운영상황에 따라 변동 가능)</p>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

SCSS

.cont-box {
            .glass-box {
              padding: 32px 24px;
            }
            .info-bullet-list {
                padding-top: 16px;
                border-top: 1px solid #e5e5e5;
                display: flex;
                flex-direction: column;
                li {
                    display: inline-flex;
                    align-items: center;
                    & ~ li {
                        margin-top: 8px;
                    }
                    &::before {
                        content: '';
                        width: 3px;
                        height: 3px;
                        margin-right: 8px;
                        background-color: #000;
                        border-radius: 50%;
                    }
                }
            }
        }