검색 구성 요소
카테고리
모든 구성 요소
사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기
레트로 전자 상거래 탐색 모음
전자 상거래를 위한 레트로/빈티지 스타일의 그레이스케일 탐색 구성 요소로, 호버 및 드롭다운과 같은 대화형 요소를 통해 중간 정도의 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.
Pastel3DBlogContentCard
블로그 또는 콘텐츠 섹션을 위한 반응형 콘텐츠 표시 구성 요소로, Tailwind CSS로 설계되었습니다. 그림자와 호버 효과를 사용하여 3D에서 영감을 받은 미학을 가진 간단한 레이아웃이 특징입니다. 색 구성표는 밝은 모드의 경우 부드러운 파스텔이며 호환되는 어두운 모드 테마가 있습니다. 구성 요소에는 이미지, 제목, 메타데이터(작성자/날짜), 발췌문 및 '자세히 읽기' 버튼이 포함됩니다. 자리 표시자 이미지는 picsum.photos 및 randomuser.me 에서 사용됩니다.
이미지 라이트박스 구성 요소
비즈니스/기업 웹사이트를 위해 3D 요소, 생생한 색상 및 적당한 복잡성으로 설계된 반응형 이미지 라이트박스 구성 요소입니다. Tailwind CSS를 사용하여 다크 모드 스타일을 지원합니다.
맨 위로 이동 버튼
화면의 오른쪽 아래 모서리에 고정된 것처럼 보이는 간단하고 우아한 맨 위로 이동 버튼입니다. 미묘한 파스텔 색조의 배색과 부드러운 호버링/포커스 마이크로 인터랙션이 특징입니다. 이 버튼에는 다크 모드 지원 기능이 내장된 반응형 디자인이 포함되어 있습니다. 마우스로 가리키면 버튼이 부드럽게 확장되고 배경색이 변경되어 시각적 피드백을 제공합니다. 구성 요소는 JavaScript가 필요하지 않은 Tailwind CSS 클래스만 사용합니다.
EarthyProductComparison (어시제품비교)
전자 상거래를 위한 반응형 제품 비교 구성 요소로, 3개의 제품 카드를 제공합니다. 흙색 색 구성표(갈색, 녹색, 호박색)와 깊이와 참여를 위한 그림자 및 악센트 막대와 같은 간단한 3D 디자인 요소를 사용하여 Tailwind CSS로 스타일링했습니다. 다크 모드 지원을 포함하며 picsum.photos의 자리 표시자 이미지를 사용합니다.
배지 구성 요소 - 다크 모드 어스 톤
다크 모드 블로그/콘텐츠 인터페이스를 위해 어스 톤으로 설계된 복잡한 배지 구성 요소 시스템입니다. 구성 요소에는 아티클 카테고리, 사용자 상태, 콘텐츠 태그, 알림 및 성과 지표에 대한 다양한 배지 유형이 포함되어 있습니다. 모두 다크 모드를 지원하는 자연스러운 어스 톤 색상을 사용합니다. 디자인은 완벽하게 반응하며 다양한 화면 크기에 맞게 조정됩니다.
제품 카드 구성 요소
그레이스케일 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 사용하여 Material Design 스타일로 디자인된 간단한 전자 상거래 제품 카드 구성 요소입니다.