모든 구성 요소

다크 모드 프로그레스 바(Dark Mode Progress Bar)

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.

                <div class="bg-gray-800 rounded-lg p-4 w-full">
    <h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
    <div class="relative pt-1">
        <div class="flex mb-2 items-center justify-between">
            <div>
                <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
                    70%
                </span>
            </div>
            <div class="text-right">
                <span class="text-xs font-semibold inline-block text-teal-600">
                    Completed
                </span>
            </div>
        </div>
        <div class="flex h-2 mb-4 rounded bg-gray-700">
            <div class="w-7/12 h-full bg-teal-600 rounded"></div>
        </div>
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
        <span class="text-white text-sm">John Doe</span>
    </div>
</div>

Microinteractions Tooltip 구성 요소

Tailwind CSS로 구축된 미묘한 마이크로 인터랙션 애니메이션, 반응형 디자인 및 어두운 테마 지원을 제공하는 간단하면서도 매력적인 툴팁 구성 요소입니다. JavaScript가 필요하지 않습니다.

미리보기 열기

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200">Hover Me</button>
    <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Hello! I'm a Tooltip
    </div>
  </div>
</div>

데이터 시각화 구성 요소

Tailwind CSS와 함께 머티리얼 디자인 스타일을 사용하는 데이터 시각화를 위한 웹 구성 요소로, 반응형 레이아웃, 어두운 테마 지원 및 자리 표시자 이미지를 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Data Visualization Components</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Bar Chart</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Bar Chart" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">A simple bar chart representing data.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Line Chart</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Line Chart" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">A line chart visualizing trends over time.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Pie Chart</h3>
            <img src="https://picsum.photos/300/200?random=3" alt="Pie Chart" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">A pie chart displaying proportions.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Scatter Plot</h3>
            <img src="https://picsum.photos/300/200?random=4" alt="Scatter Plot" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">A scatter plot illustrating distribution.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Area Chart</h3>
            <img src="https://picsum.photos/300/200?random=5" alt="Area Chart" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">An area chart showcasing cumulative data.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white">Histogram</h3>
            <img src="https://picsum.photos/300/200?random=6" alt="Histogram" class="w-full h-24 object-cover rounded-md mb-2" />
            <p class="text-gray-600 dark:text-gray-300">A histogram demonstrating frequency distribution.</p>
        </div>
    </div>
    <div class="mt-6 text-center">
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow hover:bg-blue-600 transition duration-300">
            View More
        </button>
    </div>
</div>

타임라인 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 디자인된 반응형 타임라인 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 특징으로 합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg">
  <h1 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Timeline</h1>
  <div class="border-l-4 border-gray-300 dark:border-gray-700">
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">John Doe</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-01</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Jane Smith</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-05</span>
    </div>
    <div class="mb-12 ml-4">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md"> 
        <span class="text-sm font-bold text-gray-800 dark:text-white ml-3">Alice Johnson</span>
      </div>
      <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        <img src="https://picsum.photos/200/100?random=3" alt="Placeholder" class="rounded-lg mt-2">
      </div>
      <span class="text-xs text-gray-500 dark:text-gray-400">2023-10-10</span>
    </div>
  </div>
</div>

360° 뷰어 구성 요소

picsum.photos의 자리 표시자 이미지를 사용하여 어두운 테마를 지원하는 3D 스타일로 설계된 반응형 360° 뷰어 구성 요소입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center bg-gray-800 p-6 rounded-lg shadow-lg md:flex-row md:space-x-8">
    <div class="w-full md:w-1/2 transform perspective-1000">
        <div class="relative w-full h-64 rounded overflow-hidden shadow-2xl">
            <img src="https://picsum.photos/500/400/?random" alt="360 view" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-in-out hover:rotate-y-360" />
        </div>
    </div>
    <div class="flex flex-col justify-center mt-4 md:mt-0">
        <h2 class="text-white text-xl font-bold mb-2">Explore the 360° View</h2>
        <p class="text-gray-400">Experience an immersive 3D view of the product. Move your cursor around to get a complete view.</p>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <p class="text-white text-sm">Uploaded by John Doe</p>
        </div>
    </div>
</div>
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 { background-color: #2d3748; }
        .text-gray-400 { color: #cbd5e0; }
        .border-gray-600 { border-color: #4a5568; }
    }

    /* 360° Rotation Effect */
    @keyframes rotate {
        from { transform: rotateY(0deg); }
        to { transform: rotateY(360deg); }
    }

    .hover\:rotate-y-360:hover {
        animation: rotate 2s infinite;
    }
</style>

Retro File Viewer 구성 요소

레트로/빈티지 파일 뷰어 반응형 레이아웃과 어두운 테마를 지원하는 구성 요소. 아이콘과 이름이 있는 파일 목록과 미리 보기 영역이 포함되어 있습니다. 레트로 스타일의 글꼴과 색상을 사용합니다.

미리보기 열기

                <div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
  <div class="container mx-auto p-4">
    <div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">

      <!-- File List -->
      <div class="w-full md:w-1/3 pr-4">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
        <ul>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">document.txt</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">image.jpg</span>
          </li>
          <li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
            <svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">video.mp4</span>
          </li>
        </ul>
      </div>

      <!-- File Preview -->
      <div class="w-full md:w-2/3 mt-4 md:mt-0">
        <h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
        <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
          Select a file to preview
        </div>
      </div>

    </div>
  </div>
</div>

제품 리뷰 구성 요소

Product Reviews Material Design, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소.

미리보기 열기

                <div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>

SocialLogin컴포넌트

Tailwind CSS로 구축된 반응형 소셜 로그인 구성 요소로, 미묘한 호버 마이크로 인터랙션과 완전한 다크 모드 지원을 제공합니다. 소셜 미디어 로고에 단순 아이콘 CDN을 사용합니다.

미리보기 열기

                <div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
  <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
  <div class="space-y-4">
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
      Sign in with Google
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
      Sign in with Facebook
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
      Sign in with Twitter
    </button>
  </div>
</div>

Glassmorphism 미디어 구성 요소 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Glassmorphism 미디어 구성 요소

미리보기 열기

                ```html
<div class="dark:bg-gray-900">
  <section class="container mx-auto p-6">
    <div class="flex flex-col md:flex-row items-center">
      <div class="flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">Media Component</h1>
        <p class="mb-8 leading-relaxed text-gray-600 dark:text-gray-300">This is a responsive media component with glassmorphism style and dark theme support.</p>
      </div>
      <div class="w-full md:w-1/2">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="object-cover object-center h-full w-full" alt="hero" src="https://picsum.photos/720/600">
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4 mt-8">
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/720/400" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 1</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/721/401" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 2</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/722/402" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 3</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
    </div>
  </section>
</div>
```

레트로 빈티지 헤더 구성 요소

레트로/빈티지 디자인 스타일의 반응형 헤더 구성 요소로, 80년대와 90년대에서 영감을 받은 다크 모드와 향수를 불러일으키는 미학을 지원합니다.

미리보기 열기

                <header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
            <h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
        </div>
        <nav>
            <ul class="flex space-x-6 text-white">
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mt-4 text-center">
        <img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
    </div>
</header>

<style>
    /* Dark Theme Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a2e;
        }
    }
</style>

카테고리