JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- wrap -->
		<div id="wrap">
			
			<!-- selectLayer -->
				<div class="selectLayer">
					<div class="accordionSet on">
						<div class="accordionTitle">전체</div>
						<div class="accordionData">
							<ul>
								<li>《아기 물고기 하양이 시리즈》 리뉴얼 기념</li>
								<li>응답하라 1988 만화</li>
								<li>전시명</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- //selectLayer -->

		</div>
		<!-- //wrap -->

CSS

body {background:#3c3c3c;}

* {padding:0;margin:0;list-style-type:none;}
.selectLayer {position:relative;margin-top:8px;z-index:2;
}
.selectLayer .accordionSet {
  position:relative;
padding:0 8px;
box-shadow:0 1px 2px rgba(0,0,0,0.09);
background:#fff;
margin:0 8px; /* 추가 */
}
.selectLayer .accordionTitle {
  height:44px;
  color:#3c3c3c;
  font-size:93%;
  font-weight:bold;
  line-height:42px;
}
.selectLayer .accordionData {
position:absolute;
    left:0;
    right:0; /* 추가 */
    top:44px;
    padding:8px 8px 8px;
    border-top:1px solid #e7e7e7;
    box-shadow:0 1px 2px rgba(0,0,0,0.09);
    background:#fff;}
		.selectLayer .accordionData ul {width:100%;}
		.selectLayer .accordionData li {padding:9px 0;}