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 구성 요소
스큐어모픽 사용자는 Tailwind CSS를 사용하여 반응형 효과와 어두운 테마 지원을 특징으로 하는 실제 요소를 모방하도록 설계된 구성 요소를 언급합니다.
User Mentions 구성 요소
3D 디자인 요소, 회색조 색 구성표 및 비즈니스/기업 웹 사이트에 대한 어두운 테마 지원을 제공하는 반응형 User Mentions 구성 요소입니다. Tailwind CSS를 사용하고 자리 표시자 이미지/아바타를 포함합니다.