모든 구성 요소

차트 구성 요소

반응형 효과와 어두운 테마를 지원하는 간단하고 미니멀한 차트 구성 요소입니다.

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
  <div class="flex justify-between items-center mb-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
    <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
      <option>Monthly</option>
      <option>Weekly</option>
      <option>Daily</option>
    </select>
  </div>
  <div class="h-40">
    <!-- Placeholder for chart -->
    <div class="flex items-end h-full">
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
    </div>
  </div>
</div>

Badges 구성 요소

배지 구성 요소 - 반응형 효과와 어두운 테마를 지원하는 미니멀리스트/플랫 디자인. Tailwind를 사용하는 JavaScript, 순수 HTML 및 CSS가 없습니다.

미리보기 열기

                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
  <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="3" />
  </svg>
  Dot Badge with long text that should wrap or truncate
</span>

데이터 테이블 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 스타일로 설계된 반응형 데이터 테이블 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800">
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
    </div>
</div>

360° 뷰어 구성 요소

Glassmorphism 스타일의 360° 뷰어 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 반응형 디자인과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg backdrop-blur-md glassmorphism">
        <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30"></div>
        <div class="p-5 relative z-10">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Viewer</h2>
            <div class="mt-4">
                <img src="https://picsum.photos/600/400?random=1" alt="360° view" class="w-full h-auto rounded-lg border-4 border-white dark:border-gray-700" />
            </div>
            <div class="mt-4 flex space-x-4 justify-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-700" />
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-700" />
            </div>
            <div class="mt-4 text-center">
                <button class="px-4 py-2 font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600">Rotate Left</button>
                <button class="px-4 py-2 font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-600">Rotate Right</button>
            </div>
        </div>
    </div>
</div>

<style>
    .glassmorphism {
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        border-radius: 10px;
    }
</style>

OAuth 버튼 구성 요소

Tailwind CSS를 사용하여 다크 모드로 설계된 반응형 OAuth 버튼 컴포넌트로, 어두운 배경과 저조도 환경에 최적화된 UI 요소를 제공합니다.

미리보기 열기

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
                    <span>Google</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
                    <span>Facebook</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
                    <span>Twitter</span>
                </div>
                <span>></span>
            </a>
        </div>
    </div>
</div>

360° 뷰어 구성 요소

브루탈리즘 스타일의 360° 뷰어 컴포넌트는 원시적이고 대담한 디자인으로 회전하는 이미지를 보여주며, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
    <h1 class="text-4xl font-bold mb-4">360° Viewer</h1>
    <div class="relative w-full max-w-3xl h-96 bg-gray-800 border-4 border-white rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/800/600" alt="360° view" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-700 ease-in-out hover:rotate-12 hover:scale-105"/>
        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-2xl font-semibold">View from all angles</h2>
            <p class="text-sm">Hover to rotate the view</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white" />
        <p class="mt-2">Created by: John Doe</p>
    </div>
</div>

Heat Maps 구성 요소

미니멀한 디자인, 반응형 레이아웃 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 히트맵 구성 요소입니다. JavaScript는 포함되어 있지 않습니다. 다크 모드 스타일링에 CSS를 사용합니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1">
    </div>
    <!-- Days of the week -->
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sun</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Mon</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Tue</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Wed</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Thu</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Fri</div>
    <div class="col-span-1 text-center text-sm text-gray-600 dark:text-gray-400">Sat</div>

    <!-- Heatmap cells (example: 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      <div key={i} class="h-5 bg-gray-300 dark:bg-gray-700 rounded-sm"
           style={{ opacity: Math.random() * 0.8 + 0.2 }}>
      </div>
    ))}
  </div>
</div>

Carousel Slider 구성 요소

반응형 캐러셀 슬라이더 구성 요소로, 마이크로 인터랙션과 어두운 테마를 지원합니다.

미리보기 열기

                <section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap -m-4">
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">Shooting Stars</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">The Catalyzer</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">The 400 Blows</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">Neptune</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">Holden Caulfield</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
      <div class="lg:w-1/3 sm:w-1/2 p-4">
        <div class="flex relative">
          <img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="https://picsum.photos/600/360">
          <div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
            <h2 class="tracking-widest text-sm title-font font-medium text-indigo-500 mb-1">THE SUBTITLE</h2>
            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">Alper Kamu</h1>
            <p class="leading-relaxed">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Brutalism Carousel 슬라이더 구성 요소

Brutalism Carousel Slider는 Tailwind CSS, 응답성 및 다크 모드를 제공합니다. 탐색 단추를 포함하고 자리 표시자 이미지를 사용합니다.

미리보기 열기

                <section class="bg-white dark:bg-black text-black dark:text-white p-8">
  <div class="container mx-auto">
    <div class="relative" data-carousel="static">
      <!-- Carousel wrapper -->
      <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
        <!-- Item 1 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/237/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 1">
        </div>
        <!-- Item 2 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/238/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 2">
        </div>
        <!-- Item 3 -->
        <div class="hidden duration-700 ease-in-out" data-carousel-item>
          <img src="https://picsum.photos/id/239/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 3">
        </div>
      </div>
      <!-- Slider indicators -->
      <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
        <button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
      </div>
      <!-- Slider controls -->
      <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
          <svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
          </svg>
          <span class="sr-only">Previous</span>
        </span>
      </button>
      <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
            <svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
        </span>
      </button>
    </div>
  </div>
</section>

Footer Navigation 구성 요소

반투명 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하는 glassmorphism 스타일을 사용한 반응형 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 자리 표시자 이미지를 포함합니다.

미리보기 열기

                <footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
                <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
            </div>
            <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
            </nav>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

카테고리