Success Messages 구성 요소
성공 메시지 구성 요소: 다크 모드 - 반응형 효과 및 어두운 테마 지원 기능을 제공합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.
HTML 코드
<div class="flex items-center justify-center h-screen bg-zinc-950">
<div class="relative px-4 py-3 pr-10 text-teal-500 bg-teal-900 rounded-lg shadow-md" role="alert">
<strong class="font-bold select-none">Success!</strong>
<span class="block sm:inline select-none">Your action was successful.</span>
<span class="absolute top-0 bottom-0 right-0 flex items-center px-4 py-3">
<svg class="w-6 h-6 fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<title>Close</title>
<path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15L6.342 6.342a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
</svg>
</span>
</div>
</div>관련 구성 요소
Success Messages 구성 요소
파스텔 색조의 구성표, 미묘한 애니메이션, 어두운 테마를 지원하는 반응형 디자인이 포함된 간단한 성공 메시지 구성 요소입니다. 포트폴리오가 사용자 작업을 인식하도록 설계되었습니다.
Success Messages 구성 요소
어스 톤과 어두운 테마를 지원하는 Material Design에서 영감을 받은 반응형 성공 메시지 구성요소로, 콘텐츠 소비를 위해 설계되었습니다.