JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="openLayer">레이어 열기</a>

<div class="layerWrap">
	<div class="layerContainer">
		<div class="layerHead">레이어 제목</div>
		
		<div class="layerCon"><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a><br /><a href="#">1</a></div>
    <a href="#" class="firstClose layerClose">닫기</a>
	</div>	
</div>

CSS

*{margin:0;padding:0;}
a:foucs{border:1px solid red;}
.layerWrap{display:none;position:absolute;top:100px;left:100px;border:2px solid red;width:300px;}
.layerWrap .layerContainer{position:relative;background:#fff;overflow:hidden;}
.layerWrap .firstClose{position:absolute;top:0px;right:0px;}
.layerWrap .lastClose{position:absolute;bottom:-999px;right:0px;}
.layerWrap .lastClose:focus, .lastClose:active{bottom:0px;}

JavaScript

$(function(){
	$(".openLayer").on("click", function(){
		$(".layerWrap").attr("tabindex", "0").show().focus();
		$(".layerClose").click(function(){
			$(".layerWrap").removeAttr("tabindex").hide();
			$(".openLayer").focus();
		});
	});
});