sm 기술 블로그
tailwind) 모달 프레임워크 본문
<div className="fixed top-0 left-0 flex items-center justify-center w-full h-screen text-center bg-black bg-opacity-70">
<div className="w-10/12 bg-white rounded md:w-1/3">
</div>
</div>
다음과 같이 사용하면 모달창을 만들 수 있다.
예를 들어
https://tailwindcomponents.com/component/modal-10
위 사이트에서 제공하는 모달을 가져와 프레임 워크안에 넣는다 해보자.
<div className="fixed top-0 left-0 flex items-center justify-center w-full h-screen text-center bg-black bg-opacity-70">
<div className="w-10/12 bg-white rounded md:w-1/3">
<div className="bg-slate-800 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div className="bg-white px-16 py-14 rounded-md text-center">
<h1 className="text-xl mb-4 font-bold text-slate-500">대화내용을 삭제하시겠습니까?</h1>
<button className="bg-red-500 px-7 py-2 ml-2 rounded-md text-md text-white">확인</button>
<button className="bg-indigo-500 px-7 py-2 ml-2 rounded-md text-md text-white">취소</button>
</div>
</div>
</div>
</div>
다음과 같이 작성이 가능하고 결과는 아래와 같다.
'CSS & HTML' 카테고리의 다른 글
메타태그 (meta tag) (0) | 2023.06.30 |
---|---|
[event] html은 onInput 리액트는 onchage (1) | 2022.09.30 |
CSS 포지션 속성 : absolute , fixed, realtive (0) | 2022.09.25 |
[프론트엔드] 메인페이지 (0) | 2022.07.15 |
기본값, 폰트 꾸미기 (0) | 2022.05.31 |
Comments