검색 구성 요소

모든 구성 요소

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

위시리스트 컴포넌트

3D 디자인, 유사한 색 구성표 및 대시보드 목적을 위한 단순 복잡성을 갖춘 위시리스트 구성 요소, 반응형 디자인 및 어두운 테마 지원.

                <div class="dark:bg-gray-900 bg-gray-100 min-h-screen p-4">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl transform transition-all duration-300 hover:scale-105">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 transform translate-x-2 translate-y-2 rotate-3 shadow-lg rounded-lg" src="https://picsum.photos/seed/wishlist/400/300" alt="Product image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-300 font-semibold">Wishlist Item</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Awesome Product Name</a>
        <p class="mt-2 text-gray-500 dark:text-gray-400">A short description of the product, highlighting its key features and benefits.</p>
        <div class="mt-4 flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

레트로/빈티지 소셜 미디어 네비게이션 바

Retro/Vintage Navigation Bar for Social Media with Analogous color scheme, Simple complexity, responsive, and dark theme support. 레트로/빈티지 네비게이션 바.

열다 미리 보기

                <nav class="bg-gradient-to-r from-purple-700 via-pink-500 to-red-500 p-4 shadow-lg dark:from-purple-900 dark:via-pink-700 dark:to-red-700">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold font-retro">SocialFlow</div>
    <div class="space-x-4">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Feed</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Friends</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Messages</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 font-retro">Profile</a>
    </div>
    <div class="flex items-center space-x-4">
      <button class="text-white focus:outline-none dark:text-gray-300" onclick="document.documentElement.classList.toggle('dark')">
        <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.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9 9 0 008.354-5.646z"></path></svg>
      </button>
    </div>
  </div>
</nav>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  .font-retro {
    font-family: 'Press Start 2P', cursive;
  }
</style>

Neumorphic 맨 위로 돌아가기 버튼

전자 상거래를 위한 뉴모픽 "Back to Top" 버튼은 섬세한 그림자를 사용하여 배경과 조화를 이루는 미묘하고 부드러운 UI 디자인을 제공합니다. 조화로운 모양을 위한 유사한 색상, 단순한 레이아웃, 어두운 테마를 지원하는 반응형 디자인이 특징이며 온라인 쇼핑 경험에 이상적입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</style>

Glassmorphism 360 Viewer 구성 요소

Glassmorphism 360° Viewer 구성 요소는 트라이어딕 색 구성표, 단순한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 대시보드를 위한 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-lg p-6 bg-white bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-60 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center">Product 360° View</h2>
    <div class="relative w-full h-64 mb-4 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600">
      <img src="https://picsum.photos/seed/tool/600/400" alt="360 Product View" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-blue-500 bg-opacity-20 dark:bg-blue-800 dark:bg-opacity-20 transform rotate-45 scale-150 opacity-0 transition-opacity duration-300 hover:opacity-100">
        <p class="text-white text-lg font-bold -rotate-45">360°</p>
      </div>
    </div>
    <div class="flex justify-around items-center">
      <button class="p-3 rounded-full bg-red-400 text-white dark:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-green-400 text-white dark:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition duration-200 ease-in-out transform hover:scale-105">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

Session Timeout Alert 구성 요소

전자 상거래를 위한 복잡한 뉴모픽 스타일의 세션 시간 초과 경고 구성 요소로, 단색 색 구성표와 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다 미리 보기

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

  <!-- Neumorphic Session Timeout Card -->
  <div class="w-full max-w-md p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <!-- Header -->
    <div class="flex items-center mb-6">
      <div class="w-12 h-12 rounded-full flex items-center justify-center shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mr-4">
        <svg class="w-6 h-6 text-indigo-500 dark:text-indigo-400" 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>
      <h2 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">Session Timeout</h2>
    </div>

    <!-- Progress Bar (Monochromatic Indigo) -->
    <div class="mb-6 h-4 rounded-full shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark bg-gray-300 dark:bg-gray-700 overflow-hidden">
      <div class="h-full bg-indigo-500 dark:bg-indigo-600 rounded-full" style="width: 75%;"></div>
    </div>

    <!-- Message -->
    <p class="text-center text-lg mb-8">
      Your session is about to expire due to inactivity.
      <span class="font-semibold text-indigo-700 dark:text-indigo-300">Please choose an option to continue.</span>
    </p>

    <!-- Timer Display -->
    <div class="flex items-center justify-center mb-8">
      <div class="text-5xl font-extrabold text-indigo-800 dark:text-indigo-200 tracking-wide">
        00:<span class="animate-pulse">45</span>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col space-y-4">
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Continue Session
      </button>
      <button class="w-full py-4 rounded-xl shadow-neumorphic-light hover:shadow-neumorphic-hover-light dark:shadow-neumorphic-dark dark:hover:shadow-neumorphic-hover-dark bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-lg font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1">
        Log Out
      </button>
    </div>

    <!-- Footer Link -->
    <div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Need help? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Contact Support</a>
    </div>

  </div>

</div>

<style>
  /* Base Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #afafaf, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #333333;
  }

  /* Hover State Shadows */
  .shadow-neumorphic-hover-light {
    box-shadow: 4px 4px 8px #afafaf, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-hover-dark {
    box-shadow: 4px 4px 8px #1a1a1a, -4px -4px 8px #333333;
  }

  /* Inset Shadows for elements that appear "pressed in" */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #afafaf, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
  }
</style>

Like/Reaction Buttons 컴포넌트

복잡하고 반응이 빠른 단색 좋아요/반응 버튼 구성 요소로, 비즈니스/기업 웹 사이트를 위한 마이크로 인터랙션 중심 애니메이션이 포함되어 있어 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-2 p-4 rounded-lg bg-white dark:bg-gray-800 shadow-lg">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 group">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" 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.857 2.118l-2.625 10A2 2 0 0117.279 22H3.721c-1.146 0-2.07-.988-1.921-2.118l2.625-10A2 2 0 016.721 10h4.764M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5m7 2v8a2 2 0 002 2h2a2 2 0 002-2v-8m-7 0H3"></path></svg>
      <span class="font-semibold">Like</span>
    </button>

    <!-- Reaction Buttons with Popover Effect -->
    <div class="relative group">
      <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white transform transition duration-300 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span class="font-semibold">React</span>
      </button>

      <!-- Reactions Popover -->
      <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 rounded-full bg-white dark:bg-gray-800 shadow-xl opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 transform scale-95 group-hover:scale-100 group-focus-within:scale-100 origin-bottom flex space-x-2">
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Love">
          <span class="text-2xl">❤️</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Haha">
          <span class="text-2xl">😂</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Wow">
          <span class="text-2xl">😮</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Sad">
          <span class="text-2xl">😢</span>
        </button>
        <button class="p-2 rounded-full hover:bg-blue-100 dark:hover:bg-blue-700 transform transition duration-200 hover:scale-125 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" title="Angry">
          <span class="text-2xl">😡</span>
        </button>
      </div>
    </div>
  </div>
</div>

Add to Cart Button 컴포넌트

머티리얼 디자인 원칙에 따라 스타일링된 반응형 '장바구니에 추가' 버튼 구성요소로, 트라이어딕 색 구성표가 특징이며 다크 모드를 지원합니다. 대시보드용으로 설계된 이 제품에는 수량 선택기가 포함되어 있으며 그림자 및 애니메이션에 Tailwind CSS를 사용하여 깊이 효과를 통합합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
    <div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
      <img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
    </div>
    <div class="flex-grow text-center md:text-left">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
      <div class="flex items-center justify-center md:justify-start mb-4">
        <span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
        <span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
      </div>
      <div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
        <label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
      </div>
      <button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
        </svg>
        Add to Cart
      </button>
      <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
        <p>In stock: <span class="font-bold text-green-500">Yes</span></p>
      </div>
    </div>
  </div>
</div>

Toast Notifications 구성 요소

Glassmorphism 스타일, Earth tones 색 구성표 및 다크 모드를 지원하는 반응형 디자인을 갖춘 Toast Notification 구성 요소.

열다 미리 보기

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Toast 1 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">John Doe</p>
      <p class="text-xs">New message received.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 2 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">Jane Smith</p>
      <p class="text-xs">Your report is ready.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Toast 3 -->
  <div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
    <div class="flex-shrink-0">
      <img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
    </div>
    <div class="ml-3">
      <p class="text-sm font-medium">System Update</p>
      <p class="text-xs">Security patch applied.</p>
    </div>
    <button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>

위시리스트 컴포넌트

트라이어딕 색 구성표, 단순한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 레트로/빈티지 위시리스트 구성 요소.

열다 미리 보기

                <div class="font-mono bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-4xl font-bold text-purple-700 dark:text-purple-300 mb-8 text-center">My Wishlist</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Wishlist Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Retro Analog Camera</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Capture memories in true vintage style. Limited stock!</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$129.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Classic Vinyl Player</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience the warm, rich sound of vinyl records like never before.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$89.50</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="p-6">
          <h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Vintage Desk Lamp</h2>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Illuminate your workspace with a touch of timeless elegance.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-red-500 dark:text-red-400">$39.99</span>
            <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
          </div>
        </div>
      </div>

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

드롭다운 메뉴 컴포넌트

포트폴리오에 적합한 머티리얼 디자인에서 영감을 받은 드롭다운 메뉴 구성 요소로, Tailwind CSS를 사용하여 유사한 색상, 응답성 및 다크 모드를 지원합니다.

열다 미리 보기

                <div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <div class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

1 ... 121 122 123 124 125 ... 335

검색 구성 요소

카테고리

모든 구성 요소