모든 구성 요소

메가 메뉴 컴포넌트

다크 모드를 지원하는 Mega Menu 구성 요소

                <nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg class="h-6 w-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="M4 6h16M4 12h16m-4 6h4"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>

미디어 구성 요소

반응형 디자인과 어두운 테마를 지원하는 미디어 디스플레이를 위한 Neumorphism 스타일 구성 요소입니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
    <div class="mb-4">
        <img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
    </div>
    <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
        <h2 class="text-lg font-semibold dark:text-white">User Name</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300 text-center">
        This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
    </p>
</div>

전자 상거래 구성 요소

브루탈리즘 스타일의 이커머스 컴포넌트로, 대담한 디자인, 고대비, 다크 모드를 지원하는 반응형 레이아웃을 특징으로 합니다.

미리보기 열기

                <div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded-lg shadow-lg">
    <div class="flex flex-col md:flex-row items-center justify-between space-x-0 md:space-x-4">
        <div class="flex-shrink-0">
            <img class="w-32 h-32 rounded-lg shadow-md" src="https://picsum.photos/200/200" alt="Product Image">
        </div>
        <div class="mt-4 md:mt-0 md:flex-grow">
            <h2 class="text-2xl font-bold">Brutalism T-Shirt</h2>
            <p class="text-lg text-gray-700 dark:text-gray-300">A bold statement piece for your wardrobe. Embrace the raw aesthetic of brutalism with this unique T-Shirt.</p>
            <span class="text-xl font-semibold text-red-600 dark:text-red-400">$29.99</span>
        </div>
        <div class="mt-4 md:mt-0">
            <button class="bg-red-600 text-white font-bold py-2 px-4 rounded-full shadow hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 transition">Add to Cart</button>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-bold">Product Review</h3>
        <div class="flex items-center mt-2">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <span class="font-semibold">John Doe</span>
                <p class="text-sm text-gray-600 dark:text-gray-400">“This shirt is awesome! Love the brutalist design.”</p>
            </div>
        </div>
        <div class="mt-2 flex items-center">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-2">
                <span class="font-semibold">Jane Smith</span>
                <p class="text-sm text-gray-600 dark:text-gray-400">“Very comfortable and stylish. Highly recommend!”</p>
            </div>
        </div>
    </div>
</div>

갤러리 구성 요소

미니멀한 플랫 디자인의 반응형 갤러리 구성 요소로, Tailwind CSS를 사용하여 이미지와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Gallery</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=1" alt="Random Image 1" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=2" alt="Random Image 2" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=3" alt="Random Image 3" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=4" alt="Random Image 4" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=5" alt="Random Image 5" class="w-full h-auto object-cover">
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded overflow-hidden">
            <img src="https://picsum.photos/200/300?random=6" alt="Random Image 6" class="w-full h-auto object-cover">
        </div>
    </div>
</div>

Glassmorphism 바닥글 구성 요소

흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 glassmorphism 스타일의 반응형 바닥글 구성 요소이며 어두운 테마를 지원합니다.

미리보기 열기

                <footer class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg p-6 dark:bg-gray-800 dark:bg-opacity-30 transition duration-300 ease-in-out">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-center md:text-left">
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">Connect with Us</h2>
                <p class="text-gray-600 dark:text-gray-300">Stay updated with our latest news and offers.</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full " /></a>
                <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2"><img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full " /></a>
            </div>
        </div>
        <div class="flex justify-center mt-4">
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Privacy Policy</a>
            <span class="text-gray-500 dark:text-gray-300">|</span>
            <a href="#" class="text-gray-500 hover:text-gray-800 dark:hover:text-white mx-2">Terms of Service</a>
        </div>
    </div>
</footer>

Feedback Components 구성 요소

평가 척도와 댓글을 위한 텍스트 영역을 특징으로 하는 피드백 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
      Overall Rating
    </label>
    <div class="flex items-center">
      <input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
      <label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
      <label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
      <label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
      <label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
      <label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
      Your Feedback
    </label>
    <textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
      Submit Feedback
    </button>
  </div>
</div>

필터 구성 요소

반응형 디자인과 어두운 테마가 있는 미니멀리스트 필터 구성 요소는 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center justify-between">
      <label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
      <select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
        <option value="clothing">Clothing</option>
      </select>
    </div>
    <div class="flex items-center justify-between">
      <label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
      <input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
    </div>
    <div class="flex items-center justify-between">
      <label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
      <select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="newest">Newest</option>
        <option value="price-low-high">Price: Low to High</option>
        <option value="price-high-low">Price: High to Low</option>
      </select>
    </div>
  </div>
  <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</div>

Registration Form 구성 요소

Tailwind CSS로 설계된 미니멀하고 반응이 빠른 등록 양식 구성 요소로, 다크 모드를 지원하고 최소한의 요소로 깨끗한 공간을 제공합니다.

미리보기 열기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md w-full">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center">Create Account</h2>
        <form class="mt-6 space-y-4">
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Name</label>
                <input type="text" id="name" name="name" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="Your Name">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="[email protected]">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="••••••••">
            </div>
            <div>
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Avatar</label>
                <div class="flex items-center space-x-4">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border border-gray-300 dark:border-gray-600">
                    <input type="file" id="avatar" name="avatar" class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200">
                </div>
            </div>
            <div class="mt-6">
                <button type="submit" class="w-full py-2 px-4 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">Register</button>
            </div>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">
            Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a>
        </p>
    </div>
</div>

오류 메시지 구성 요소

Tailwind CSS를 사용하여 잔인함 스타일로 설계된 반응형 오류 메시지 구성 요소로, 고대비, 특이한 레이아웃 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
        <h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
        <h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>

헤더 구성 요소

반투명 유리와 같은 반투명 요소와 어두운 테마를 지원하는 Glassmorphism 디자인을 특징으로 하는 반응형 헤더 구성 요소입니다.

미리보기 열기

                <header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
    </nav>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
    </div>
</header>

카테고리