모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

진행률 표시줄

Microinteractions 디자인이 있는 Progress Bar 구성 요소. HTML 및 CSS(Tailwind CSS)만 사용하는 반응형 효과 및 어두운 테마 지원이 포함됩니다.

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

제품 리뷰 구성 요소

Tailwind CSS로 구축된 반응형 제품 리뷰 구성 요소로, 호버링에 대한 마이크로 인터랙션, 어두운 테마 지원 및 자리 표시자 이미지를 제공합니다. JavaScript는 사용되지 않습니다.

열다 미리 보기

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
             <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
        </div>

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
                     <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                     </div>
                </div>
                 <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
        </div>

    </div>
</div>

필터 구성 요소

레트로/빈티지 디자인 스타일의 반응형 필터 구성 요소로, Tailwind CSS로 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Filters</h2>
    <div class="flex flex-col md:flex-row md:justify-around mb-4">
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
            <select id="category" class="form-select block w-full px-3 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200">
                <option>All</option>
                <option>Electronics</option>
                <option>Fashion</option>
                <option>Home & Garden</option>
            </select>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="price">Price Range</label>
            <input type="range" id="price" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50" />
        </div>
    </div>
    <div class="flex flex-col md:flex-row md:justify-between mb-6">
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">In Stock</span>
            </label>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">Free Shipping</span>
            </label>
        </div>
    </div>
    <div class="text-center">
        <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200">Apply Filters</button>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Results</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 1</h4>
                <img src="https://picsum.photos/200/150?random=1" alt="Item 1" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 1.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$49.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 2</h4>
                <img src="https://picsum.photos/200/150?random=2" alt="Item 2" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 2.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$29.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 3</h4>
                <img src="https://picsum.photos/200/150?random=3" alt="Item 3" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 3.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$19.99</span>
                </div>
            </div>
        </div>
    </div>
</div>

Columns 구성 요소

레트로/빈티지 미학으로 디자인된 반응형 Columns 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다. 각각 picsum.photos 및 randomuser.me 의 자리 표시자 이미지와 아바타가 있습니다.

열다 미리 보기

                <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-gray-200 mb-8">Retro Columns</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel risus vitae nisl euismod aliquam.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">Jane Doe</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Random placeholder image">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="flex items-center mt-4">
                    <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
                    <p class="ml-2 text-gray-800 dark:text-gray-200">John Smith</p>
                </div>
            </div>
        </div>
    </div>
</div>

좋아요/반응 버튼

Like/Reaction Buttons 구성 요소에는 Microinteractions, 응답성 및 어두운 테마 지원이 있습니다.

열다 미리 보기

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
  <div class="flex space-x-4">
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
      </svg>
      <span>Like</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
      </svg>
      <span>Love</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
      </svg>
      <span>Haha</span>
    </button>
  </div>
</div>

Product Gallery 구성 요소

Material Design 원칙을 기반으로 하는 Product Gallery 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다. 자리 표시자 이미지를 포함합니다.

열다 미리 보기

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product1/500/300" alt="Product Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$19.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product2/500/300" alt="Product Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$29.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product3/500/300" alt="Product Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$39.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
     <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <img src="https://picsum.photos/seed/product4/500/300" alt="Product Image 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-2">Product Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center justify-between">
          <span class="text-gray-900 dark:text-white font-bold text-xl">$49.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 깊이 효과 및 어두운 테마 지원을 포함하여 3D 모양으로 디자인된 반응형 메가 메뉴 구성 요소입니다. 이 구성 요소는 자리 표시자 서비스의 이미지와 사용자 아바타를 특징으로 합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            Menu
        </button>
    </div>
    <div class="grid grid-cols-3 gap-4 p-4">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
        <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

인증 컴포넌트

반응형 효과와 어두운 테마 지원을 특징으로 하는 Tailwind CSS로 설계된 스큐어모픽 인증 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="password" type="password" placeholder="********">
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400">
                    <label class="ml-2 block text-gray-700 dark:text-gray-300">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
        <div class="mt-6 text-center border-t pt-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/200" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/201" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/202" alt="Random user avatar">
            </div>
        </div>
    </div>
</div>

파일 뷰어 구성 요소

브루탈리즘 스타일로 디자인된 반응형 파일 뷰어 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-gray-400 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-3xl">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">File Viewer</h1>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-12 w-12 border-2 border-gray-600">
            <span class="ml-3 text-xl font-medium text-gray-800 dark:text-white">Uploaded by John Doe</span>
        </div>
        <div class="flex mb-4">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File: Project Report.pdf</h2>
            <div class="ml-auto text-lg font-semibold text-gray-600 dark:text-gray-300">10 MB</div>
        </div>
        <p class="text-gray-600 dark:text-gray-300 mb-6">
            This document contains a detailed report on project progress and future milestones. Please review it carefully.
        </p>
        <img src="https://picsum.photos/600/400" alt="Placeholder Image" class="rounded-md mb-4">
        <div class="flex justify-between">
            <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">Download</button>
            <button class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-400 transition duration-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Delete</button>
        </div>
    </div>
</div>

사용자 언급 구성 요소 - 스큐어모피즘

사용자는 스큐어모피즘 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소를 언급하며 tailwind css와 함께 html만 사용합니다. 자바 스크립트가 필요하지 않습니다.

열다 미리 보기

                <div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex justify-center items-center">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-white dark:from-gray-900 dark:to-gray-700 opacity-50 pointer-events-none"></div>
    
    <div class="relative z-10">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Mentions</h2>

      <div class="space-y-4">
        <!-- Mention 1 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Mentioned you in a comment</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
        </div>

        <!-- Mention 2 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Added you to a project</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
        </div>

         <!-- Mention 3 -->
        <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-600 p-4 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
          <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-500 shadow-inner" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Reacted to your post</p>
          </div>
           <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 220 221 222 223 224 ... 262

카테고리

모든 구성 요소