검색 구성 요소

모든 구성 요소

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

피드백 구성 요소

어두운 모드의 비즈니스/기업 웹 사이트를 위해 설계된 복잡한 피드백 구성 요소로, 보색 구성표를 사용합니다.

                <div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
    <form class="space-y-4">
        <div>
            <label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
            <input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
        </div>
        <div>
            <label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
            <input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
        </div>
        <div>
            <label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
            <textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
        </div>
        <div class="flex items-center mb-4">
            <input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
            <label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
        </div>
        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
        <div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
                    <p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
                    <p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
                </div>
            </div>
        </div>
    </div>
</div>

브루탈리스트 메가 메뉴

브루탈리즘 디자인의 반응형 메가 메뉴 구성 요소로, 블로그 또는 콘텐츠 기반 웹 사이트에 대한 흙색 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="bg-brown-900 dark:bg-gray-800 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-white text-2xl font-bold">Blog</div>
            <nav class="mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Home</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">About</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Categories</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 1</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 2</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 3</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
        </div>
    </div>
</div>

Neumorphism Interactive Components 컴포넌트

Neumorphism Interactive Components 기업/기업 웹 사이트를 위한 구성 요소

열다 미리 보기

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  
  <!-- Complex Component Section -->
  <section class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Interactive Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-blue-500 text-white text-lg font-semibold shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-green-500 text-white text-lg font-semibold shadow-lg hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-red-500 text-white text-lg font-semibold shadow-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300">Learn More</button>
      </div>
      
      <!-- Interactive Form Example -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3">
          <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Contact Us</h3>
          <form>
              <div class="mb-4">
                  <label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Name</label>
                  <input type="text" id="name" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                  <input type="email" id="email" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Message</label>
                  <textarea id="message" rows="4" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-700 text-gray-800 dark:text-gray-200"></textarea>
              </div>
              <button type="submit" class="py-2 px-6 rounded-full bg-gray-500 text-white text-lg font-semibold shadow-lg hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 transition duration-300">Send Message</button>
          </form>
      </div>

       <!-- Interactive Element with Image -->
        <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3 flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/seed/interactive/300/200" alt="Interactive Image" class="rounded-lg mb-6 md:mb-0 md:mr-8 shadow-xl">
            <div>
                <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Interactive Feature with Image</h3>
                <p class="text-gray-700 dark:text-gray-300 mb-6">This section includes an image to make the interactive element more engaging visually.</p>
                <button class="py-2 px-6 rounded-full bg-yellow-500 text-white text-lg font-semibold shadow-lg hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300">Explore Feature</button>
            </div>
        </div>

    </div>
  </section>

  <!-- Custom Shadows for Neumorphism -->
  <style>
    .shadow-2xl-dark {
      box-shadow: 9px 9px 16px #1c1c1c, -9px -9px 16px #262626;
    }
    .shadow-inner-dark {
      box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #262626;
    }
  </style>

</div>

트라이어딕 색 구성표를 사용하는 Neumorphic 장바구니 구성 요소입니다. 비즈니스/기업 웹사이트용으로 설계된 중간 정도의 복잡성을 가지고 있습니다. 이 구성 요소는 반응형이며 Tailwind의 dark: 접두사를 사용하는 다크 모드 지원을 포함합니다. 수량과 가격이 있는 항목에 대한 자리 표시자, 소계 및 체크 아웃 버튼을 포함합니다. 제품 이미지에 picsum.photos를 사용합니다.

열다 미리 보기

                <div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
    <div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
        <h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>

        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>

            <!-- Cart Item 2 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
                    <p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <span class="text-xl font-semibold dark:text-white">Subtotal:</span>
                <span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
            </div>
        </div>

        <div class="mt-6">
            <button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
        </div>
    </div>
</div>

<style>
.neumorphic-card {
    background: #e0e0e0;
    box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}

.dark .neumorphic-card {
    background: #374151;
    box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}

.neumorphic-item {
     background: #e0e0e0;
     box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}

.dark .neumorphic-item {
    background: #374151;
    box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>

카드 구성 요소

파스텔 색상 구성표가 있는 포트폴리오를 위한 반응형 다크 모드 카드 구성 요소.

열다 미리 보기

                <!-- ./ src/components/Card.astro -->

<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 m-4">
  <img class="w-full" src="https://picsum.photos/400/250" alt="Placeholder image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Card Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-pastel-pink rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag1</span>
    <span class="inline-block bg-pastel-green rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag2</span>
    <span class="inline-block bg-pastel-blue rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mb-2">#tag3</span>
  </div>
    <div class="flex items-center px-6 py-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user">
        <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 18, 2023</p>
        </div>
    </div>
</div>

<style>
  .bg-pastel-pink {
    background-color: #f9cdda;
  }
  .bg-pastel-green {
    background-color: #b2f2bb;
  }
  .bg-pastel-blue {
    background-color: #a7ccff;
  }
</style>

Session Timeout Alert 구성 요소

반응형, 어두운 테마와 호환되는 세션 시간 초과 경고 구성 요소로, Glassmorphism 스타일, 어스 톤 및 Tailwind CSS를 사용하는 복잡한 레이아웃이 있습니다. 젖빛 유리 효과, 흐림 효과 및 포트폴리오에 적합한 여러 대화형 요소가 특징입니다.

열다 미리 보기

                <div class="relative min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">

  <!-- Glassmorphism 배경 효과 -->
  <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-amber-500/20 to-green-600/20 backdrop-filter backdrop-blur-xl z-0"></div>

  <div class="relative bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-lg shadow-lg p-6 max-w-sm mx-auto z-10 border border-gray-200 dark:border-gray-700">
    
    <!-- 헤더 -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">세션 타임아웃</h3>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>

    <!-- 내용 -->
    <div class="text-sm text-gray-700 dark:text-gray-200 mb-6">
      <p>보안상의 이유로 회원님의 세션이 곧 만료됩니다. 계속 활동하려면 "세션 연장" 버튼을 클릭해 주세요.</p>
      <p class="mt-2 font-semibold">남은 시간: <span class="text-amber-700 dark:text-amber-400">05:00</span></p>
    </div>

    <!-- 프로그레스 바 (예시) -->
    <div class="w-full bg-gray-300 dark:bg-gray-600 rounded-full h-2 mb-6">
      <div class="bg-green-600 dark:bg-green-500 h-2 rounded-full" style="width: 80%;"></div>
    </div>

    <!-- 버튼 -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-transparent rounded-md hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900">취소</button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 border border-transparent rounded-md shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-900 dark:bg-amber-700 dark:hover:bg-amber-800">세션 연장</button>
    </div>

  </div>
</div>

Glassmorphism 카드 구성 요소

생생한 색상의 Glassmorphism 카드 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다 미리 보기

                <div class="p-10 dark:bg-gray-900 bg-gray-100">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/600/400" alt="Card Image">
        <div class="p-6">
          <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-purple-500 text-white rounded-full text-xs font-semibold uppercase">New</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Blog Post Title</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 18, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/nature/600/400" alt="Card Image">
        <div class="p-6">
           <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-pink-500 text-white rounded-full text-xs font-semibold uppercase">Trending</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Another Blog Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 17, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/tech/600/400" alt="Card Image">
        <div class="p-6">
             <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-yellow-500 text-white rounded-full text-xs font-semibold uppercase">Featured</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Yet Another Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 16, 2023</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Like/Reaction Buttons 컴포넌트

반투명 요소와 흐림 효과가 있는 glassmorphism을 특징으로 하는 복잡한 웹 구성 요소입니다. 여기에는 비즈니스 웹사이트용으로 설계된 여러 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
    <span class="text-white text-lg font-semibold">Your Name</span>
  </div>

  <span class="text-white text-sm mb-4">How do you feel about this?</span>

  <div class="flex space-x-4">
    <button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
      Like
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
      Love
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
      Angry
    </button>
  </div>

  <div class="mt-6 flex items-center space-x-2">
    <span class="text-white">Total Reactions:</span>
    <span class="text-white font-bold">123</span>
  </div>
</div>

Content Display 구성 요소

단순하고 반응이 빠른 콘텐츠 디스플레이 구성 요소는 보색이 있는 브루탈리즘 스타일로 디자인되었습니다. 비즈니스/기업 웹사이트에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

Progress Bar 구성 요소

파스텔 색상 구성표가 있는 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다.

열다 미리 보기

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

1 ... 247 248 249 250 251 ... 315

검색 구성 요소

카테고리

모든 구성 요소

피드백 구성 요소

브루탈리스트 메가 메뉴

Neumorphism Interactive Components 컴포넌트

뉴모픽 쇼핑 카트

카드 구성 요소

Session Timeout Alert 구성 요소

Glassmorphism 카드 구성 요소

Like/Reaction Buttons 컴포넌트

Content Display 구성 요소

Progress Bar 구성 요소