User Mentions 구성 요소
사용자 언급 : 반응 형 디자인과 어두운 모드 지원으로 Glassmorphism 스타일을 구현하는 구성 요소.
HTML 코드
<div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
<p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
</div>
<button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
Follow
</button>
</div>관련 구성 요소
User Mentions 구성 요소
스큐어모픽 사용자는 Tailwind CSS를 사용하여 반응형 효과와 어두운 테마 지원을 특징으로 하는 실제 요소를 모방하도록 설계된 구성 요소를 언급합니다.
User Mentions 구성 요소
Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소. JavaScript는 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.
사용자 언급 구성 요소 - 스큐어모피즘
사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.