Alert Messages 구성 요소
다크 모드 반응형 경고 메시지 구성 요소는 포트폴리오에서 알림 또는 메시지를 표시하기 위한 것으로, 흙색과 여러 대화형 요소로 설계되었습니다.
HTML 코드
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
<h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
<div class="my-4">
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
</div>
</div>
</div>
</div>관련 구성 요소
Alert Messages 구성 요소
비즈니스 웹 사이트를 위한 간단한 Neumorphism 스타일의 경고 메시지 구성 요소로, JavaScript 없이 Tailwind CSS를 사용하여 생생한 색상과 반응형 어두운 테마 지원을 제공합니다.
Alert Messages 구성 요소
어두운 UI, 가을 색 구성표로 설계된 경고 메시지 구성 요소로 전문 컨설팅 서비스에 적합합니다. 반응이 빠르며 다크 모드를 지원합니다.