User Mentions 구성 요소
뉴모피즘(Neumorphism) 스타일의 사용자는 반응형 디자인과 다크 모드를 지원하는 포트폴리오 웹사이트에 어스 톤을 사용하는 컴포넌트를 언급합니다.
HTML 코드
<div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
</div>
</div>
</div>
</div>관련 구성 요소
User Mentions 구성 요소
사용자는 Tailwind CSS를 사용하여 단색 색 구성표, 단순한 레이아웃, 반응형 디자인 및 어두운 테마 지원을 특징으로 하는 대시보드의 구성 요소를 언급합니다.
User Mentions 구성 요소
대시보드 인터페이스에 적합한 glassmorphism 디자인, 기업 파란색 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 User Mentions 구성 요소입니다.
User Mentions 구성 요소
Glassmorphism 디자인, 응답성 및 어두운 테마를 지원하는 Tailwind CSS를 사용하는 User Mentions 구성 요소.