모든 구성 요소

태그 클라우드 구성 요소

Tailwind CSS를 사용하여 Neumorphism 디자인 스타일, 반응형 효과 및 어두운 테마를 지원하는 태그 클라우드 구성 요소입니다.

                <div class="p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-lg">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Tag Cloud</h2>
    <div class="flex flex-wrap gap-4">
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">HTML</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">JavaScript</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">React</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Tailwind CSS</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Neumorphism</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">UI Design</span>
        <span class="px-4 py-2 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Web Development</span>
    </div>
</div>

Neumorphism Style이 있는 Comments Section 구성 요소

Comments Section Neumorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소입니다. JavaScript 코드는 포함되어 있지 않습니다.

미리보기 열기

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  .neumorphic {
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    transition: all 0.3s ease;
  }

  .neumorphic:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }

  .dark .neumorphic {
    background: #333333;
    box-shadow: 8px 8px 15px #222222, -8px -8px 15px #444444;
  }

  .dark .neumorphic:hover {
    box-shadow: 4px 4px 8px #222222, -4px -4px 8px #444444;
  }

  .neumorphic-input {
    border-radius: 5px;
    background: #e0e0e0;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
    padding: 10px;
    width: 100%;
    color: #333;
  }

  .dark .neumorphic-input {
    background: #333333;
    box-shadow: inset 5px 5px 10px #222222, inset -5px -5px 10px #444444;
    color: #ccc;
  }
</style>

<div class="container mx-auto p-4">

  <div class="neumorphic p-6 mb-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- Comment Input -->
    <div class="mb-4">
      <textarea class="neumorphic-input" rows="3" placeholder="Add a comment..."></textarea>
    </div>
    <button class="neumorphic bg-blue-500 text-white px-4 py-2 rounded">Post Comment</button>

    <!-- Existing Comments -->
    <div class="mt-6">

      <!-- Comment 1 -->
      <div class="neumorphic p-4 mb-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">This is a great component! I love the neumorphism style.</p>
      </div>

      <!-- Comment 2 -->
      <div class="neumorphic p-4 mb-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Looks really good with the dark theme as well.</p>
      </div>

    </div>
  </div>

</div>

미디어 임베드 컴포넌트

미디어 임베드 컴포넌트는 마이크로 인터랙션, 반응형 효과 및 어두운 테마를 지원합니다. 자바스크립트가 필요하지 않습니다.

미리보기 열기

                 <div class="w-full max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 transform transition duration-500 hover:scale-105"> <div class="relative"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/300/200" alt="Media thumbnail"> <div class="absolute bottom-0 right-0 bg-black text-white text-xs px-2 py-1 m-2 rounded-md"> 2:30 </div> </div> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Channel Name</p> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-300"> <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"></path> </svg> <span class="text-xs">1.2K Views</span> </div> </div> <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 flex items-center justify-between"> <div class="flex items-center"> <img class="h-8 w-8 rounded-full object-cover mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"> <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Uploader Name</span> </div> <button class="text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition duration-300"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path> </svg> </button> </div> </div>

머티리얼 디자인 카드

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 머티리얼 디자인 스타일의 카드 구성 요소입니다. 고도 및 파급 효과, 시각적 단서가 특징입니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
    <img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
    <div class="px-6 py-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
    </div>
    <div class="px-6 py-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
      <button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

Tailwind CSS를 사용하는 Glassmorphism 디자인의 반응형 드롭다운 메뉴로, 다크 모드를 지원하고 흐릿한 배경 효과를 제공합니다.

미리보기 열기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-opacity-30 bg-white dark:bg-opacity-30 dark:bg-gray-800 hover:bg-opacity-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" 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>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Profile</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Settings</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">Logout</a>
    </div>
  </div>
</div>

<style>
  .bg-opacity-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  .dark .bg-opacity-30 {
    background-color: rgba(55, 65, 81, 0.3) !important;
  }
  .backdrop-blur {
    backdrop-filter: blur(10px);
  }
</style>

<div class="absolute inset-0 rounded-md bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-blur border border-gray-300 dark:border-gray-700">
    <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/200/100" alt="Placeholder image">
    <div class="absolute inset-0 flex items-center justify-center">
      <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
</div>

사이트 맵 구성 요소

Tailwind CSS를 사용하여 다크 모드에서 설계된 반응형 사이트 맵 구성 요소입니다.

미리보기 열기

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Site Map</h2>
    <ul class="space-y-3">
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Home</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>About Us</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Services</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Contact</span>
            </a>
        </li>
        <li class="hover:text-gray-400 transition duration-300">
            <a href="#" class="flex items-center space-x-2">
                <img src="https://picsum.photos/30/30" alt="Random Placeholder" class="rounded-full" />
                <span>Privacy Policy</span>
            </a>
        </li>
    </ul>
    <div class="mt-5">
        <h3 class="text-xl font-semibold">Follow Us</h3>
        <ul class="flex space-x-4 mt-2">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full w-8 h-8" /></li>
        </ul>
    </div>
</div>

Social Share Buttons 구성 요소

반응형 소셜 공유 버튼 구성 요소로, 깊이와 참여를 위해 3차원 요소를 통합한 3D 디자인입니다. CSS로 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex justify-center space-x-4 p-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
            <i class="fab fa-facebook-f"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
            <i class="fab fa-twitter"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
            <i class="fab fa-linkedin-in"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
            <i class="fab fa-instagram"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

제품 갤러리 구성 요소 - Material Design

Material Design에서 영감을 받은 Product Gallery 구성 요소에는 반응형 디자인, 호버 효과 및 어두운 테마 지원이 포함되어 있습니다. Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="dark:bg-gray-800 dark:text-white">
    <div class="-m-1 flex flex-wrap md:-m-2">
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=1"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=2"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=3"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=4"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=5"
          />
        </div>
      </div>
      <div class="flex w-1/3 flex-wrap">
        <div class="w-full p-1 md:p-2">
          <img
            alt="gallery"
            class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
            src="https://picsum.photos/500/300?random=6"
          />
        </div>
      </div>
    </div>
  </div>
</div>

360° 뷰어 구성 요소

반응형 디자인과 Tailwind CSS를 사용하는 어두운 테마를 지원하는 360° 뷰어 구성 요소입니다. 마이크로 인터랙션 느낌을 위한 애니메이션 및 상호 작용에 CSS를 사용합니다. 자바스크립트가 없습니다.

미리보기 열기

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 bg-cover bg-center transform transition-transform duration-500 ease-in-out hover:rotate-180" style="background-image: url('https://picsum.photos/id/237/256/256');"></div>
    <div class="absolute inset-0 flex justify-center items-center opacity-0 hover:opacity-100 transition-opacity duration-300">
      <div class="text-white text-xl font-bold">View 360</div>
    </div>
  </div>
</div>

검색 상자 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일로 디자인된 검색 상자 구성 요소입니다. 고대비 디자인, 반응형 효과가 특징이며 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
        <div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
            <input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
            <button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
                <span>🔍</span>
            </button>
        </div>
        <img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
        <div class="flex justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
    </div>
</div>

카테고리