검색 구성 요소

모든 구성 요소

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

제품 리뷰 구성 요소

3D 디자인 미학, 밝은 액센트가 있는 흑백 색 구성표, 다크 모드 지원을 포함한 CRM/비즈니스 도구용으로 설계된 단순하고 반응이 빠른 제품 리뷰 구성 요소입니다.

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 relative z-10">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">Customer Reviews</h2>
        <div class="flex items-center space-x-1">
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-400 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-600 dark:text-gray-400 text-sm sm:text-base font-medium">(4.5/5)</span>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-6">
        <!-- Review 1 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">CEO, Tech Solutions</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "This product has fundamentally changed how we manage our customer relationships. The intuitive interface and powerful features are a game-changer. Highly recommend!"
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Jan 15, 2024</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
            </div>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of David Lee">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">David Lee</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Founder, Marketing Pro</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "Excellent support and a truly robust CRM solution. It helps us streamline our sales process and improve customer satisfaction significantly."
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Dec 28, 2023</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span class="text-gray-400 dark:text-gray-500">&#9733;</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition-shadow duration-300 transform translate-z-10 hover:translate-z-20 text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          View All Reviews
        </button>
      </div>
    </div>
    <!-- Decorative '3D' element -->
    <div class="absolute inset-0 bg-gray-200 dark:bg-gray-950 -z-10 transform scale-105 rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 transition-all duration-500 ease-in-out opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="transform-origin: center center; filter: blur(50px);"></div>
  </div>
</div>

레트로위시리스트컴포넌트

레트로/빈티지 미학, 가을 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 위시리스트 구성 요소로 문서 또는 기술 자료 사이트에 적합합니다.

열다 미리 보기

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-900 text-stone-800 dark:text-stone-200 border-t-4 border-amber-800 dark:border-amber-600 rounded-lg shadow-md max-w-4xl mx-auto">
  <div class="flex items-center mb-4">
    <svg class="w-8 h-8 mr-3 text-amber-700 dark:text-amber-500" 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 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
    </svg>
    <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-amber-800 dark:text-amber-300 font-mono">Wish List</h2>
  </div>

  <p class="text-sm sm:text-base mb-6 text-stone-700 dark:text-stone-300">
    This is your personalized collection of items you're interested in. Click 'Add to Cart' to make them yours!
  </p>

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

    <!-- Wishlist Item 1 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Vintage Record Player</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Classic design with modern capabilities. Enjoy your favorite vinyls.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$199.99</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-sm overflow-hidden border border-brown-300 dark:border-zinc-700 transition-transform duration-200 ease-in-out hover:scale-[1.01] flex flex-col">
      <img src="https://picsum.photos/300/200?random=2" alt="Placeholder Image" class="w-full h-48 object-cover object-center border-b border-brown-300 dark:border-zinc-700">
      <div class="p-4 flex-grow">
        <h3 class="text-xl font-semibold mb-2 text-brown-800 dark:text-brown-200 font-mono">Retro Gaming Console</h3>
        <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Relive the 8-bit era with this multi-game console.</p>
        <p class="text-lg font-bold text-amber-700 dark:text-amber-400">$79.50</p>
      </div>
      <div class="px-4 pb-4">
        <button class="w-full bg-burgundy-700 hover:bg-burgundy-800 text-white font-bold py-2 px-4 rounded transition-colors duration-200 dark:bg-burgundy-600 dark:hover:bg-burgundy-700 focus:outline-none focus:ring-2 focus:ring-burgundy-500">Add to Cart</button>
      </div>
    </div>

  </div>

  <div class="text-center mt-8 pt-6 border-t border-amber-200 dark:border-zinc-700 text-sm italic text-stone-500 dark:text-stone-400">
    More items coming soon to your list!
  </div>
</div>

헤더 구성 요소

멀티벤더 마켓플레이스를 위한 복잡하고 반응이 빠른 헤더 구성 요소로, 보석 색조의 색 구성표와 함께 종이/인쇄 미학에서 영감을 받았습니다. 검색, 탐색, 사용자 프로필 및 카트가 포함됩니다.

열다 미리 보기

                <header class="bg-amber-50 dark:bg-stone-950 shadow-md border-b-2 border-stone-200 dark:border-amber-950 print-pattern relative z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo and Site Name -->
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-emerald-700 dark:text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.44 1.94l-1.42 1.42M20 10h-1m-1.94 6.44l-1.42-1.42M10 20v1m-6.44-1.94l1.42-1.42M3 10H2m1.94-6.44l1.42 1.42M15 9a3 3 0 11-6 0 3 3 0 016 0zm6 3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span class="ml-2 text-2xl font-serif font-black tracking-tighter text-emerald-800 dark:text-emerald-200">Marketplace</span>
        </a>
      </div>

      <!-- Search Bar (Desktop/Tablet) -->
      <div class="flex-1 mx-4 hidden lg:block">
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-stone-400 dark:text-stone-600" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
          <input type="search" placeholder="Search for emeralds, rubies, and more..." class="block w-full pl-10 pr-3 py-2 border border-stone-300 dark:border-stone-700 rounded-lg leading-5 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-sans text-sm shadow-inner-paper dark:shadow-inner-paper-dark">
        </div>
      </div>

      <!-- Right-side actions (Desktop/Tablet) -->
      <div class="hidden lg:flex items-center space-x-6">
        <nav class="flex space-x-6">
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Shop</a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md text-sm font-medium font-serif transition-colors duration-200">Sell</a>
          <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 px-3 py-2 rounded-md rounded-lg text-sm font-medium font-serif transition-colors duration-200">Blog</a>
        </nav>
        <div class="relative">
          <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
            </svg>
            <span class="ml-1 text-sm font-medium font-serif">Cart</span>
            <span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
          </button>
        </div>
        <div class="relative">
          <button type="button" class="max-w-xs bg-stone-100 dark:bg-stone-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
            <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          </button>
          <!-- Dropdown menu (hidden by default) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div> -->
        </div>
      </div>

      <!-- Mobile Menu Button & Icons (Mobile/Tablet) -->
      <div class="flex items-center lg:hidden">
        <div class="mr-4">
          <button class="relative flex items-center text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-950 rounded-full transition-colors duration-200">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13a1 1 0 100 2h10a1 1 0 100-2M11 19a1 1 0 100 2h2a1 1 0 100-2M10 17H7m6 0h3" />
            </svg>
            <span class="absolute -top-1 -right-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white bg-ruby-600 rounded-full py-0.5 px-1.5 transform translate-x-1/2 -translate-y-1/2 dark:bg-ruby-400">3</span>
          </button>
        </div>
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-stone-700 dark:text-stone-300 hover:text-emerald-700 dark:hover:text-emerald-300 hover:bg-stone-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Search Bar (Mobile Only) -->
    <div class="mt-4 lg:hidden">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-stone-400 dark:text-stone-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
          </svg>
        </div>
        <input type="search" placeholder="Search for emeralds, rubies, and more..." class="block w-full pl-10 pr-3 py-2 border border-stone-300 dark:border-stone-700 rounded-lg leading-5 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 font-sans text-sm shadow-inner-paper dark:shadow-inner-paper-dark">
      </div>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default) -->
  <!--
  <div class="lg:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-emerald-50 dark:bg-stone-700 text-emerald-700 dark:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif" aria-current="page">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Sell</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 block px-3 py-2 rounded-md text-base font-medium font-serif">Blog</a>
    </div>
    <div class="pt-4 pb-3 border-t border-stone-200 dark:border-stone-700 shadow-custom-paper dark:shadow-custom-paper-dark">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-stone-900 dark:text-stone-100 font-serif">Jane Doe</div>
          <div class="text-sm font-medium leading-none text-stone-500 dark:text-stone-400 mt-1 font-sans">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 dark:text-stone-300 hover:bg-stone-100 dark:hover:bg-stone-700 hover:text-emerald-700 dark:hover:text-emerald-300 font-serif">Sign out</a>
      </div>
    </div>
  </div>
  -->

  <style>
    .print-pattern {
        background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23edece2" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    .dark .print-pattern {
        background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23332200" fill-opacity="0.3"%3E%3Cpath d="M36 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H8V28h28v6zm12 0v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H20V28h28v6zM0 34v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4h-2v-4h-2v4H-8V28h28v6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    }

    .shadow-inner-paper {
      box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    }

    .dark .shadow-inner-paper-dark {
      box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    }

    .shadow-custom-paper {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .dark .shadow-custom-paper-dark {
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    }

    /* Jewel Tones */
    .text-emerald-700 { color: #016E65; } .dark\:text-emerald-300 { color: #6EE7B7; }
    .text-emerald-800 { color: #005F55; } .dark\:text-emerald-200 { color: #A7F3D0; }
    .focus\:ring-emerald-500 { --tw-ring-color: #10B981; }
    .hover\:text-emerald-700 { color: #016E65; } .dark\:hover\:text-emerald-300 { color: #6EE7B7; }
    .bg-emerald-50 { background-color: #ECFDF5; } .dark\:bg-stone-700 { background-color: #44403C; }
    .bg-ruby-600 { background-color: #DC2626; } .dark\:bg-ruby-400 { background-color: #FB7185; }
  </style>
</header>

Art Deco Data Visualization 구성 요소

컨설팅 서비스를 위한 복잡하고 반응이 빠른 아르데코 스타일의 데이터 시각화 구성 요소로, 기하학적 패턴과 고급스러운 보라색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="font-sans p-4 sm:p-8 md:p-12 bg-purple-50 dark:bg-gray-950 text-purple-900 dark:text-purple-100 min-h-screen relative overflow-hidden">

  <!-- Art Deco Geometric Background Elements -->
  <div class="absolute inset-0 pointer-events-none overflow-hidden opacity-10 dark:opacity-5">
    <div class="absolute top-0 left-0 w-64 h-64 bg-gradient-to-br from-purple-200 to-purple-400 dark:from-violet-800 dark:to-purple-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 animate-pulse-slow"></div>
    <div class="absolute bottom-0 right-0 w-80 h-80 bg-gradient-to-tl from-purple-300 to-purple-500 dark:from-violet-700 dark:to-purple-800 transform translate-x-1/3 translate-y-1/3 -rotate-30 animate-pulse-slow delay-500"></div>
    <div class="absolute top-1/4 right-0 w-32 h-32 bg-purple-200 dark:bg-violet-900 transform translate-x-1/2 rotate-15"></div>
    <div class="absolute bottom-1/4 left-0 w-48 h-48 bg-purple-100 dark:bg-violet-950 transform -translate-x-1/3 -rotate-25"></div>
  </div>

  <header class="relative z-10 text-center mb-10 md:mb-16">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-purple-950 dark:text-purple-50 mb-4 tracking-tight leading-tight uppercase relative inline-block group">
      <span class="block">Strategic Insights</span>
      <span class="block text-2xl sm:text-3xl md:text-4xl font-normal text-purple-700 dark:text-purple-300">Data & Analytics Console</span>
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-purple-600 dark:bg-purple-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-center"></div>
    </h1>
    <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-300 max-w-3xl mx-auto opacity-90">Unveiling actionable intelligence through elegant data visualization and predictive modeling.</p>
  </header>

  <main class="relative z-10 grid grid-cols-1 md:grid-cols-12 gap-6 sm:gap-8 lg:gap-10">

    <!-- Main Data Panel (Span 8/12 - Desktop) -->
    <section class="md:col-span-8 flex flex-col p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg transform hover:scale-[1.005] transition-transform duration-300 group">
      <h2 class="text-3xl sm:text-4xl font-bold text-purple-900 dark:text-purple-100 mb-6 flex items-center justify-between">
        <span class="">Market Trend Dynamics</span>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.309.746L13 9.475V15a1 1 0 01-.293.707l-2 2A1 1 0 019 17v-5.5L5.309 6.746A1 1 0 015 6V3z" clip-rule="evenodd" /></svg></button>
          <button class="p-2 rounded-full border border-purple-400 dark:border-purple-600 bg-purple-200 dark:bg-gray-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-gray-600 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a1 1 0 011 1v3.414l-1.707 1.707A1 1 0 0115 11.414V17a1 1 0 01-1 1H6a1 1 0 01-1-1v-5.586a1 1 0 01-.293-.707L3 8.414V5a1 1 0 011-1h1V3a1 1 0 112 0v1zM6 9h8V5H6v4z" clip-rule="evenodd" /></svg></button>
        </div>
      </h2>

      <div class="flex-grow grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
        <!-- Chart Placeholder 1 -->
        <div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Growth Projection</h3>
          <img src="https://picsum.photos/300/200?random=1" alt="Growth Projection Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>
        
        <!-- Chart Placeholder 2 -->
        <div class="bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Demographic Shift</h3>
          <img src="https://picsum.photos/300/200?random=2" alt="Demographic Shift Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>

        <!-- Chart Placeholder 3 (Hidden on smaller viewports) -->
        <div class="hidden xl:flex bg-purple-50 dark:bg-gray-700 p-4 rounded-md border border-purple-200 dark:border-purple-600 shadow-inner flex-col items-center justify-center min-h-[180px] group-hover:scale-[1.01] transition-transform duration-200">
          <h3 class="text-xl font-semibold text-purple-800 dark:text-purple-200 mb-2">Competitor Landscape</h3>
          <img src="https://picsum.photos/300/200?random=3" alt="Competitor Landscape Chart" class="w-full h-auto object-cover rounded-md border border-purple-300 dark:border-purple-500 opacity-80 group-hover:opacity-100 transition-opacity">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
          <h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Key Indicators</h4>
          <ul class="list-none space-y-1 text-sm text-purple-700 dark:text-purple-200">
            <li><span class="font-medium text-purple-900 dark:text-purple-50">Market Volume:</span> +12.3% YoY</li>
            <li><span class="font-medium text-purple-900 dark:text-purple-50">Customer Acquisition:</span> 8.1% increase</li>
          </ul>
        </div>
        <div class="bg-purple-200 dark:bg-gray-700 p-4 rounded-md border border-purple-300 dark:border-purple-600">
          <h4 class="font-semibold text-purple-800 dark:text-purple-100 text-lg mb-2">Recommendations</h4>
          <p class="text-sm text-purple-700 dark:text-purple-200">Optimize digital channels for targeted outreach. Diversify product offerings based on emerging trends.</p>
        </div>
      </div>
    </section>

    <!-- Side Panel (Span 4/12 - Desktop) -->
    <aside class="md:col-span-4 flex flex-col space-y-6 sm:space-y-8">

      <!-- Quick Stats Card -->
      <div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg group transform hover:scale-[1.005] transition-transform duration-300">
        <h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Operational Summary</h2>
        <div class="grid grid-cols-2 gap-4 text-center">
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">$1.2M</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Revenue Q3</p>
          </div>
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">2,500+</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Client Engagements</p>
          </div>
          <div class="p-4 bg-purple-200 dark:bg-gray-700 rounded-md border border-purple-300 dark:border-purple-600 col-span-2 group-hover:scale-[1.02] transition-transform duration-200">
            <p class="text-4xl font-extrabold text-purple-800 dark:text-purple-200 mb-1">98%</p>
            <p class="text-purple-600 dark:text-purple-300 text-sm">Client Satisfaction Score</p>
          </div>
        </div>
      </div>

      <!-- Recent Activities/Notifications Card -->
      <div class="p-6 sm:p-8 bg-purple-100 dark:bg-gray-800 border-2 border-purple-300 dark:border-purple-700 shadow-xl rounded-lg flex-grow overflow-hidden group transform hover:scale-[1.005] transition-transform duration-300">
        <h2 class="text-2xl sm:text-3xl font-bold text-purple-900 dark:text-purple-100 mb-5">Recent Activities</h2>
        <div class="overflow-y-auto max-h-64 sm:max-h-72 lg:max-h-96 pr-2">
          <ul class="space-y-4">
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Julian Thorne</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Generated <span class="font-medium">'Q4 Performance Report'</span>.</p>
                <time datetime="2023-10-26" class="text-xs text-purple-500 dark:text-purple-400">2 hours ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Eleanor Vance</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Updated <span class="font-medium">'Client Portfolio Trends'</span> dashboard.</p>
                <time datetime="2023-10-25" class="text-xs text-purple-500 dark:text-purple-400">Yesterday</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Marcus Finch</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Completed <span class="font-medium">'Predictive Model A'</span> recalibration.</p>
                <time datetime="2023-10-24" class="text-xs text-purple-500 dark:text-purple-400">2 days ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Olivia Reed</p>
                <p class="text-sm text-purple-700 dark:text-purple-300">Initiated new project: <span class="font-medium">'Global Market Entry Strategy'</span>.</p>
                <time datetime="2023-10-23" class="text-xs text-purple-500 dark:text-purple-400">3 days ago</time>
              </div>
            </li>
            <li class="flex items-start">
              <img class="h-10 w-10 rounded-full mr-3 border-2 border-purple-400 dark:border-purple-600" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
              <div class="flex-grow">
                <p class="text-purple-800 dark:text-purple-200 font-semibold">David Chen</p>
                <p class="text-sm text-purple-700 dark:text-purple-300"> Reviewed 'Client Feedback Analysis'.</p>
                <time datetime="2023-10-22" class="text-xs text-purple-500 dark:text-purple-400">4 days ago</time>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </aside>

  </main>

  <footer class="relative z-10 text-center mt-10 md:mt-16 text-purple-600 dark:text-purple-400 text-sm opacity-80">
    <p>&copy; 2023 Nexus Analytics. All rights reserved. | <a href="#" class="underline hover:text-purple-700 dark:hover:text-purple-300">Privacy Policy</a></p>
  </footer>

</div>

장난기 넘치는 입사 지원서

따뜻한 무채색, 둥근 요소, 다크 모드 지원을 갖춘 반응이 빠르고 재미있는 입사 지원서 구성 요소로, 구인 게시판 및 경력 개발 플랫폼에 적합합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-colors duration-300">
    <div class="p-6 sm:p-8 md:p-10 bg-amber-100 dark:bg-gray-800 text-center rounded-t-3xl">
      <h2 class="text-3xl sm:text-4xl font-bold text-amber-800 dark:text-amber-200 mb-2 leading-tight">Ready for Your Next Big Adventure?</h2>
      <p class="text-lg text-amber-700 dark:text-amber-300">Fill out this form to apply for exciting opportunities!</p>
    </div>

    <form class="p-6 sm:p-8 md:p-10 space-y-6">
      <!-- Personal Information Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Tell Us About You
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">First Name <span class="text-red-500">*</span></label>
            <input type="text" id="first-name" name="first_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div>
            <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Last Name <span class="text-red-500">*</span></label>
            <input type="text" id="last-name" name="last_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div class="md:col-span-2">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address <span class="text-red-500">*</span></label>
            <input type="email" id="email" name="email" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Phone Number</label>
            <input type="tel" id="phone" name="phone" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
          </div>
        </div>
      </div>

      <!-- Resume & Portfolio Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 4.043v1.854a.25.25 0 01-.4 0L7.043 4.043A.25.25 0 006.5 4.218v11.564a.25.25 0 00.41.171L9.5 13.957a.25.25 0 01.4 0l2.647 2.196a.25.25 0 00.41-.171V4.218a.25.25 0 00-.543-.175L9.5 4.043zM6.5 13.5v-7.39l.75-.621L9.5 7.043v6.457l-2.647 2.196L6.5 13.5zm7 0L10.5 15.696V7.043l2.25-1.854.75.621v7.39z"></path></svg>
          Your Accomplishments
        </h3>
        <div>
          <label for="resume-file" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Upload Resume/CV <span class="text-red-500">*</span></label>
          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-500 border-dashed rounded-lg cursor-pointer hover:border-amber-400 dark:hover:border-amber-600 transition-colors duration-200">
            <div class="space-y-1 text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-300" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <div class="flex text-sm text-gray-600 dark:text-gray-300">
                <label for="resume-file" class="relative cursor-pointer bg-white dark:bg-gray-700 rounded-md font-medium text-amber-600 hover:text-amber-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-amber-500 dark:focus-within:ring-offset-gray-700">
                  <span>Upload a file</span>
                  <input id="resume-file" name="resume_file" type="file" class="sr-only" accept=".pdf,.doc,.docx" required>
                </label>
                <p class="pl-1">or drag and drop</p>
              </div>
              <p class="text-xs text-gray-500 dark:text-gray-400">PDF, DOC, DOCX up to 10MB</p>
            </div>
          </div>
        </div>
        <div class="mt-6">
          <label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Portfolio/LinkedIn Profile (Optional)</label>
          <input type="url" id="portfolio-link" name="portfolio_link" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., https://your-portfolio.com or https://linkedin.com/in/yourname">
        </div>
      </div>

      <!-- Experience & Skills Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
          Your Experience & Skills
        </h3>
        <div>
          <label for="position-applying-for" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Position Applying For</label>
          <select id="position-applying-for" name="position_applying_for" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
            <option value="">Select a position...</option>
            <option value="frontend-dev">Frontend Developer</option>
            <option value="backend-dev">Backend Developer</option>
            <option value="fullstack-dev">Fullstack Developer</option>
            <option value="ux-designer">UX/UI Designer</option>
            <option value="project-manager">Project Manager</option>
            <option value="data-scientist">Data Scientist</option>
          </select>
        </div>
        <div class="mt-6">
          <label for="years-experience" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Years of Professional Experience</label>
          <input type="number" id="years-experience" name="years_experience" min="0" max="50" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., 5">
        </div>
        <div class="mt-6">
          <label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Cover Letter (Optional)</label>
          <textarea id="cover-letter" name="cover_letter" rows="5" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 dark:placeholder-gray-400 placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="Tell us why you're a great fit for this role..."></textarea>
        </div>
      </div>

      <!-- Availability & Preferences Section -->
      <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
          <svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 12A.5.5 0 016 11.5a.5.5 0 00.5-.5H12a.5.5 0 00.5.5.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5zm0 0v-1a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5zM3 10V4.5A2.5 2.5 0 015.5 2H10a.5.5 0 01.5.5v15a.5.5 0 01-.5.5H5.5A2.5 2.5 0 013 15.5V10z" clip-rule="evenodd"></path></svg>
          Your Availability
        </h3>
        <div class="flex items-center space-x-3">
          <input id="remote-work" name="remote_work" type="checkbox" class="h-5 w-5 text-amber-600 focus:ring-amber-500 border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-700">
          <label for="remote-work" class="text-sm font-medium text-gray-700 dark:text-gray-200">Interested in remote work</label>
        </div>
        <div class="mt-4">
          <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Earliest Start Date</label>
          <input type="date" id="start-date" name="start_date" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
        </div>
      </div>

      <div class="mt-8 flex justify-center">
        <button type="submit" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-semibold rounded-full shadow-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-700 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group">
          <svg class="w-6 h-6 mr-3 -ml-1 text-white group-hover:animate-bounce-fwd" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          Submit Application
        </button>
      </div>
    </form>
  </div>
</div>

로그인 양식 구성 요소

패션/뷰티 브랜드를 위한 Bauhaus에서 영감을 받은 로그인 양식으로, 고대비 색상, 기하학적 형태, 다크 모드 지원으로 완벽한 응답성을 제공합니다.

열다 미리 보기

                <section class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden md:flex flex-col lg:flex-row border-4 border-black dark:border-white animate-fade-in">
    <div class="md:w-full p-8 md:p-10 flex flex-col justify-center">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-400 mb-4 text-center tracking-tight border-b-4 border-red-500 dark:border-red-600 pb-2">
        LOGIN
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8 font-medium">Access your exclusive fashion world.</p>
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2 uppercase tracking-wide">Email Address</label>
          <input type="email" id="email" name="email" class="appearance-none block w-full px-4 py-3 border-4 border-black dark:border-white rounded-none shadow-sm placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:border-yellow-400 text-gray-900 dark:text-gray-100 dark:bg-gray-700 sm:text-base" placeholder="[email protected]" required>
        </div>
        <div>
          <label for="password" class="block text-sm font-bold text-gray-700 dark:text-gray-200 mb-2 uppercase tracking-wide">Password</label>
          <input type="password" id="password" name="password" class="appearance-none block w-full px-4 py-3 border-4 border-black dark:border-white rounded-none shadow-sm placeholder-gray-400 focus:outline-none focus:ring-4 focus:ring-yellow-400 focus:border-yellow-400 text-gray-900 dark:text-gray-100 dark:bg-gray-700 sm:text-base" placeholder="••••••••" required>
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-5 w-5 text-red-500 dark:text-red-600 border-2 border-black dark:border-white focus:ring-red-500 rounded-none bg-white dark:bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember me
            </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-blue-800 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-500 transition-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border-4 border-black dark:border-white rounded-none shadow-sm text-lg font-bold text-black dark:text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-4 focus:ring-blue-800 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105 active:scale-95 uppercase tracking-wider">
            Sign In
          </button>
        </div>
      </form>
      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          Don't have an account? 
          <a href="#" class="font-medium text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-500 transition-colors duration-200">
            Sign Up
          </a>
        </p>
      </div>
    </div>
  </div>
</section>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.7s ease-out forwards;
  }
</style>

RetroReservationErrorMessage

예약/예약 시스템을 위한 간단한 레트로/빈티지 스타일의 오류 메시지 구성 요소로, 고대비 색상과 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-mono">
  <div class="max-w-md w-full p-6 sm:p-8 rounded-lg shadow-xl border-4 border-red-500 bg-white dark:bg-gray-700 transform transition-all duration-300 hover:scale-105">
    <div class="flex items-center justify-center mb-6">
      <svg class="h-12 w-12 text-red-500 mr-3 animate-pulse" 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>
      <h2 class="text-3xl font-extrabold text-red-600 dark:text-red-400 uppercase tracking-wider">Error!</h2>
    </div>
    <p class="text-center text-lg text-gray-800 dark:text-gray-200 mb-6 leading-relaxed">
      <span class="block font-bold mb-2">Booking Failed.</span>
      It looks like there was an issue with your reservation.
    </p>
    <ul class="list-none p-0 mb-6 space-y-2 text-gray-700 dark:text-gray-300">
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> The selected time slot is no longer available.
      </li>
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> Please check your internet connection and try again.
      </li>
      <li class="flex items-center text-md">
        <span class="text-red-500 mr-2 text-xl">&rsaquo;</span> Contact support if the issue persists.
      </li>
    </ul>
    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-red-600 text-white font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
        Try Again
      </button>
      <button class="flex-1 w-full sm:w-auto px-6 py-3 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold rounded-md uppercase text-lg tracking-wide shadow-lg transform transition-all duration-200 hover:bg-gray-400 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75">
        Go Back
      </button>
    </div>
    <div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
      Error Code: BK-RSV-001 | Date: 2023-10-27
    </div>
  </div>
</div>

파일 뷰어 구성 요소

기업/전문가 스타일, 유사한 색 구성표 및 다크 모드를 지원하는 복잡하고 반응이 빠른 파일 뷰어 구성 요소로, 비즈니스 환경에 적합합니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">

  <div class="flex flex-col lg:flex-row w-full max-w-7xl bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">

    <!-- Left Sidebar: File List/Navigation -->
    <div class="w-full lg:w-1/4 p-4 sm:p-6 border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex flex-col">
      <div class="text-lg sm:text-xl font-semibold mb-6 flex items-center">
        <svg class="w-6 h-6 mr-2 text-teal-600 dark:text-teal-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 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
        </svg>
        Documents
      </div>

      <div class="relative mb-6">
        <input type="text" placeholder="Search files..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:focus:ring-teal-400 focus:border-transparent dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <div class="overflow-y-auto flex-grow pr-2 -mr-2">
        <a href="#" class="flex items-center p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-teal-700 dark:text-teal-300 font-medium mb-2 transition duration-200 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-600">
          <svg class="w-5 h-5 mr-3 text-teal-600 dark:text-teal-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          <span>2024 Lookbook.pdf</span>
        </a>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-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="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          <span>Campaign_Spring2025.jpg</span>
        </a>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H7a2 2 0 00-2 2v11a2 2 0 002 2z"></path></svg>
          <span>Marketing_Strategy.docx</span>
        </a>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          <span>Q4_Sales_Report.xlsx</span>
        </a>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
          <span>Brand_Video_Draft.mp4</span>
        </a>
        <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 mb-2 transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-3 text-gray-500 dark:text-gray-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          <span>Website_Content_Plan.pdf</span>
        </a>
      </div>

      <div class="mt-auto pt-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full flex items-center justify-center px-4 py-2 bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-semibold rounded-lg shadow-md transition duration-200 ease-in-out">
          <svg class="w-5 h-5 mr-2" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
          </svg>
          Upload New File
        </button>
      </div>
    </div>

    <!-- Main Content: File Viewer -->
    <div class="w-full lg:w-3/4 flex flex-col">
      <!-- Viewer Header -->
      <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <h2 class="text-lg sm:text-xl font-bold flex items-center">
          <svg class="w-6 h-6 mr-3 text-teal-600 dark:text-teal-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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          2024 Lookbook.pdf
        </h2>
        <div class="flex space-x-2 sm:space-x-4">
          <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
            <svg class="w-5 h-5" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
            <span class="sr-only">View</span>
          </button>
          <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
            <svg class="w-5 h-5" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0L8 12m4 4V4"></path></svg>
            <span class="sr-only">Download</span>
          </button>
          <button class="p-2 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
            <svg class="w-5 h-5" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="sr-only">More Options</span>
          </button>
        </div>
      </div>

      <!-- File Content Preview (Image/PDF Placeholder) -->
      <div class="flex-grow p-4 sm:p-6 overflow-y-auto flex items-center justify-center bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/800/600?random=1" alt="Document Preview" class="max-w-full max-h-[70vh] object-contain rounded-lg shadow-lg dark:shadow-xl">
      </div>

      <!-- File Details / Actions -->
      <div class="p-4 sm:p-6 bg-white dark:bg-gray-800">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          <div>
            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">File Type:</p>
            <p class="font-medium text-base sm:text-lg">PDF Document</p>
          </div>
          <div>
            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Last Modified:</p>
            <p class="font-medium text-base sm:text-lg">October 26, 2023, 10:30 AM</p>
          </div>
          <div>
            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">File Size:</p>
            <p class="font-medium text-base sm:text-lg">12.5 MB</p>
          </div>
          <div>
            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">Uploaded By:</p>
            <div class="flex items-center mt-1">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-7 h-7 rounded-full mr-2">
              <span class="font-medium text-base sm:text-lg">Alex Johnson</span>
            </div>
          </div>
        </div>

        <div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="flex-1 px-4 py-2 border border-teal-600 dark:border-teal-500 text-teal-600 dark:text-teal-400 rounded-lg hover:bg-teal-50 dark:hover:bg-gray-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
            <svg class="w-5 h-5 inline-block mr-2" 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="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h6a2 2 0 012 2v10a2 2 0 01-2 2h-6a2 2 0 00-2 2v-2m0-4h.01M12 15h.01"></path></svg>
            Share File
          </button>
          <button class="flex-1 px-4 py-2 bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white rounded-lg shadow-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-teal-500">
            <svg class="w-5 h-5 inline-block mr-2" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            Edit Document
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

Chat Window 구성 요소

모노스페이스/개발자 디자인 미학, 가을 색 구성표를 갖춘 복잡하고 반응이 빠른 채팅 창 구성 요소로, 다크 모드 지원 및 대화형 요소를 포함하여 스포츠/피트니스 애플리케이션에 최적화되어 있습니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-amber-50 dark:bg-zinc-950 font-mono text-zinc-800 dark:text-zinc-200 p-4 sm:p-6 lg:p-8">

  <!-- Top Bar / Header -->
  <div class="flex items-center justify-between p-4 bg-orange-800 dark:bg-zinc-800 text-white rounded-t-lg shadow-md mb-4">
    <div class="flex items-center space-x-3">
      <img src="https://picsum.photos/id/1018/60/60" alt="Team Logo" class="w-10 h-10 rounded-full border-2 border-white object-cover">
      <h2 class="text-lg sm:text-xl font-bold flex flex-col sm:flex-row items-baseline">
        <span class="block sm:mr-2">Team 'Apex Predators'</span>
        <span class="text-orange-200 text-sm sm:text-base">(Workout 05/11 Chat)</span>
      </h2>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
      </button>
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Area -->
  <div class="flex-1 overflow-y-auto p-4 bg-orange-50 dark:bg-zinc-900 rounded-lg shadow-inner mb-4 border border-orange-200 dark:border-zinc-800 space-y-4 sm:space-y-6">

    <!-- Message 1 (Other User) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Coach Mike</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:15 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Alright team, focus on form today. We're hitting those high-intensity reps. Hydrate well!</p>
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 2 (Self) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:17 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Got it, Coach! Ready to push hard. 💪 Any specific warm-up routine you recommend?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- Message 3 (Other user with image) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Alex G.</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:20 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Checking in! Here's my progress from yesterday's cardio:</p>
          <img src="https://picsum.photos/id/237/300/200" alt="Activity Progress" class="mt-2 rounded-md max-w-full h-auto object-cover">
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 4 (Self - long message) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:22 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Awesome work, Alex! That's a solid run. Keep it up! I'm struggling a bit with my squat depth, considering filming a set today to review it later. Any tips for getting lower without losing form?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- System message / separator -->
    <div class="text-center text-xs text-orange-700 dark:text-zinc-500 font-semibold italic my-4">
      --- Today --- 
    </div>

    <!-- Pinned message / announcement -->
    <div class="flex items-start p-3 bg-brown-700 dark:bg-brown-900 text-white rounded-lg shadow-md border border-brown-600 dark:border-brown-800">
        <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4H9V9h2v5zm-2-7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path></svg>
        <p class="text-sm sm:text-base font-semibold">Reminder: <span class="font-normal">Warm-up drills posted in the 'Resources' channel.</span></p>
    </div>

  </div>

  <!-- Input Area -->
  <div class="flex flex-col sm:flex-row items-center p-4 bg-orange-800 dark:bg-zinc-800 rounded-b-lg shadow-md space-y-3 sm:space-y-0 sm:space-x-3">
    <button class="p-2 rounded-full text-white bg-orange-700 dark:bg-zinc-700 hover:bg-orange-600 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600 w-full sm:w-auto">
      <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.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L18 14"></path></svg>
      <span class="sr-only">Attach File</span>
    </button>
    <textarea type="text" placeholder="Message #team-chat (Press Alt+Enter for new line)" class="flex-1 p-3 rounded-lg bg-orange-100 dark:bg-zinc-700 text-orange-900 dark:text-zinc-200 placeholder-orange-400 dark:placeholder-zinc-400 border border-orange-300 dark:border-zinc-600 focus:outline-none focus:border-orange-500 dark:focus:border-zinc-500 resize-none h-12 sm:h-auto min-h-[48px] max-h-[150px]"></textarea>
    <button class="p-3 rounded-lg bg-burgundy dark:bg-purple-800 text-white hover:bg-brown-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-burgundy dark:focus:ring-purple-600 w-full sm:w-auto font-semibold">
      <svg class="w-6 h-6 inline-block sm:hidden" 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 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      <span class="hidden sm:inline-block">Send</span>
    </button>
  </div>

</div>

<style>
  /* Define custom colors for better autumn scheme representation */
  .bg-burgundy {
    background-color: #8B0000;
  }
  .text-burgundy {
    color: #8B0000;
  }
  .border-burgundy {
    border-color: #8B0000;
  }
  .hover\:bg-burgundy-light:hover {
    background-color: #A52A2A;
  }

  /* Dark mode variants for custom colors */
  .dark .bg-burgundy {
    background-color: #6a0000;
  }
  .dark .text-burgundy {
    color: #ae4747;
  }
  .dark .border-burgundy {
    border-color: #6a0000;
  }
  .dark .hover\:bg-burgundy-light:hover {
    background-color: #7c0000;
  }

  /* Add some brown tones */
  .bg-brown-700 {
    background-color: #795548;
  }
  .dark\:bg-brown-900 {
    background-color: #4e342e;
  }
  .border-brown-600 {
    border-color: #6d4c41;
  }
  .dark\:border-brown-800 {
    border-color: #3e2723;
  }
  .hover\:bg-brown-600:hover {
    background-color: #6d4c41;
  }

  /* Adjust max-h for textarea on smaller screens */
  @media (max-width: 639px) {
    textarea {
      max-height: 100px; /* Limit height on mobile */
    }
  }
</style>

User Mentions 구성 요소

복잡하고 단색의 산업 스타일 사용자는 원자재, 노출된 요소 및 실용적인 미학을 특징으로 하는 여행/관광 웹 사이트의 구성 요소를 언급합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="font-sans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-w-4xl mx-auto my-8">
  <div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-300 dark:border-gray-600">
    <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 flex items-center">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-gray-600 dark:text-gray-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="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2H1m16-14v2a3 3 0 01-3 3H8a3 3 0 01-3-3V6m15.75 14H1.25S.5 19 .5 17V3S.5 2 2 2h20s1.5 0 1.5 1v14s0 1-1.5 1zM12 11V6m0 0l3 3m-3-3L9 9"></path>
      </svg>
      Mentions & Interactions
    </h2>
    <button class="px-4 py-2 bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      See All
    </button>
  </div>

  <div class="mb-8 space-y-6">
    <!-- Mention Item 1 -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@john_doe</span> mentioned your recent trip to <span class="font-semibold text-gray-800 dark:text-gray-300">Tokyo, Japan</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "Absolutely loved your photos from Tokyo! The ramen looked incredible. Any tips on finding the best spots?"
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" 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="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            2 hours ago
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" 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="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Mention Item 2 -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@travel_guru</span> tagged you in a post about <span class="font-semibold text-gray-800 dark:text-gray-300">hiking trails in Patagonia</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "For epic adventures, check out these trails! @your_profile, you'd love the views from Fitz Roy."
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" 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="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Yesterday
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" 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="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Mention Item 3 (New reply) -->
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
      <div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
        <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar">
      </div>
      <div class="flex-grow">
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
          <span class="font-semibold text-gray-900 dark:text-gray-100">@city_explorer</span> replied to your comment on <span class="font-semibold text-gray-800 dark:text-gray-300">ancient ruins in Rome</span>
        </p>
        <blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
          "Absolutely! The Colosseum at sunset is unforgettable. Did you visit the Palatine Hill as well?"
        </blockquote>
        <div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
          <span class="flex items-center">
            <svg class="w-4 h-4 mr-1" 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="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            5 days ago
          </span>
          <div class="space-x-3">
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
              <svg class="w-4 h-4 mr-1" 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="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
              Reply
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center">
    <button class="px-6 py-3 bg-gray-700 text-gray-100 dark:bg-gray-600 dark:text-gray-200 rounded-md text-lg font-semibold tracking-wide hover:bg-gray-800 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Load More Mentions
    </button>
  </div>
</div>

1 ... 31 32 33 34 35 ... 335

검색 구성 요소

카테고리

모든 구성 요소