검색 구성 요소

모든 구성 요소

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

Table of Contents 구성 요소

소셜 미디어 인터페이스를 위한 반응형 목차 구성 요소로, 흙색과 간단한 레이아웃을 사용하는 다크 모드 UI로 설계되었습니다. Tailwind CSS를 사용하여 어두운 테마를 지원하며 JavaScript가 없는 HTML 전용입니다.

열다 미리 보기

                <nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
  <h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
  <ul class="space-y-2">
    <li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
    <li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
    <li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
    <li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
    <li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
    <li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
    <li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
    <li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
  </ul>
</nav>

RetroDashboard컴포넌트

Retro/Vintage Dashboard 구성 요소는 그레이스케일 구성표와 다크 모드를 지원합니다. 이 복잡한 구성 요소는 여러 대화형 요소, 반응형 디자인을 특징으로 하며 스타일링에 Tailwind CSS를 사용합니다. 대시보드 또는 제어판에 적합합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
      <span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
      <!-- Card 1: Sales Overview -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
        <div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
        <p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
        <div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
      </div>

      <!-- Card 2: User Activity -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
        <div class="flex items-center justify-between mb-2">
          <span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
        </div>
        <ul class="space-y-2 mt-4">
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>John Doe logged in</span>
          </li>
          <li class="flex items-center text-gray-700 dark:text-gray-300">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Jane Smith viewed report</span>
          </li>
        </ul>
      </div>

      <!-- Card 3: Traffic Sources -->
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
        <h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
        <ul class="space-y-2 text-gray-700 dark:text-gray-300">
          <li class="flex justify-between items-center">
            <span>Direct</span>
            <span class="font-bold">40%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Referral</span>
            <span class="font-bold">30%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Organic Search</span>
            <span class="font-bold">20%</span>
          </li>
          <li class="flex justify-between items-center">
            <span>Social Media</span>
            <span class="font-bold">10%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Main Data Visualization Area -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
      <h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
      <div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
        <p class="text-lg">Graph/Chart Placeholder</p>
      </div>
    </div>

    <!-- Tabbed Interface -->
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
      <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Overview
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
            Analytics
          </button>
          <button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
            Settings
          </button>
        </nav>
      </div>
      <div class="text-gray-700 dark:text-gray-300">
        <p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 1</h3>
            <p>Value: <span class="font-semibold">1,234</span></p>
          </div>
          <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
            <h3 class="font-bold mb-2">Detailed Metric 2</h3>
            <p>Value: <span class="font-semibold">56.78%</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

레트로 햄버거 메뉴 구성 요소

복잡한 레트로/빈티지 햄버거 메뉴 구성 요소(유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원).

열다 미리 보기

                <div class="bg-gradient-to-br from-purple-800 via-pink-700 to-red-600 font-mono min-h-screen p-8">

  <!-- Retro Header -->
  <header class="flex justify-between items-center mb-12">
    <div class="text-white text-4xl font-bold tracking-wider">BYTE BLVD</div>
    <div class="md:hidden">
      <input type="checkbox" id="menu-toggle" class="hidden">
      <label for="menu-toggle" class="block cursor-pointer group">
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white mb-1 transition-all duration-300 group-hover:bg-yellow-400"></div>
        <div class="w-8 h-1 bg-white transition-all duration-300 group-hover:bg-yellow-400"></div>
      </label>
      
      <!-- Mobile Menu Overlay -->
      <div class="fixed inset-0 bg-black bg-opacity-75 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out" id="mobile-menu">
        <div class="flex justify-end p-4">
          <label for="menu-toggle" class="text-white text-4xl cursor-pointer">&times;</label>
        </div>
        <nav class="flex flex-col items-center justify-center h-full space-y-8">
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Home</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Articles</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">About</a>
          <a href="#" class="text-white text-3xl hover:text-yellow-400 transition-colors duration-300">Contact</a>
        </nav>
      </div>
    </div>
    
    <!-- Desktop Navigation -->
    <nav class="hidden md:block">
      <ul class="flex space-x-8">
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Home</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Articles</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">About</a></li>
        <li><a href="#" class="text-white text-xl hover:text-yellow-400 transition-colors duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Featured Article Card -->
    <div class="md:col-span-2 bg-purple-700 dark:bg-purple-900 rounded-lg shadow-lg overflow-hidden border-4 border-yellow-400 transform transition-transform duration-300 hover:scale-105">
      <img src="https://picsum.photos/800/400?random=1" alt="Featured Article" class="w-full h-64 object-cover">
      <div class="p-6">
        <h2 class="text-yellow-400 text-3xl font-bold mb-3">The Pixelated Past: A Dive into 8-bit Gaming</h2>
        <p class="text-white text-lg leading-relaxed">Explore the golden age of video games, from classic consoles to arcade masterpieces. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-5 inline-block bg-yellow-400 text-purple-900 font-bold py-2 px-6 rounded-full hover:bg-yellow-300 transition-colors duration-300">Read More</a>
      </div>
    </div>

    <!-- Sidebar / Recent Posts -->
    <aside class="bg-pink-600 dark:bg-pink-800 rounded-lg shadow-lg p-6 border-4 border-yellow-400">
      <h3 class="text-yellow-400 text-2xl font-bold mb-6">Recent Transmissions</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Decoding Early Web Design</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">The Rise of Synthwave Music</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Vintage Tech Gadgets Revisited</a></li>
        <li><a href="#" class="text-white text-lg hover:text-yellow-400 transition-colors duration-300">Analog Photography Revival</a></li>
      </ul>

      <div class="mt-8">
        <h3 class="text-yellow-400 text-2xl font-bold mb-4">Retro Subscribers</h3>
        <div class="flex -space-x-2 overflow-hidden">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/men/82.jpg" alt="retro avatar">
          <img class="inline-block h-12 w-12 rounded-full ring-2 ring-yellow-400" src="https://randomuser.me/api/portraits/women/62.jpg" alt="retro avatar">
        </div>
      </div>
    </aside>
  </main>

  <!-- Footer -->
  <footer class="mt-12 text-center text-white text-opacity-80">
    <p>&copy; 2023 BYTE BLVD. All rights reserved. Relive the glory days!</p>
  </footer>

  <style>
    /* Custom CSS for Hamburger Menu Animation */
    #menu-toggle:checked + label div:nth-child(1) {
      transform: translateY(9px) rotate(45deg);
    }
    #menu-toggle:checked + label div:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked + label div:nth-child(3) {
      transform: translateY(-9px) rotate(-45deg);
    }
    #menu-toggle:checked ~ #mobile-menu {
      transform: translateX(0%);
    }
  </style>
</div>

소셜 로그인 구성 요소

그레이스케일의 Glassmorphism 스타일의 소셜 로그인 구성 요소로, 전자 상거래 사이트에 적합한 다크 모드를 지원합니다. 디자인은 반응형이며 젖빛 유리 효과와 흐림을 포함합니다. JavaScript는 포함되어 있지 않습니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
    <div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
          Sign in with Twitter
        </button>
      </div>

      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
      </div>
    </div>
  </div>
</div>

Social Share Buttons 구성 요소

다크 모드를 지원하는 대시보드를 위한 간단하고 반응이 빠른 3D 그레이스케일 소셜 공유 버튼 구성 요소입니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

미디어 임베드 컴포넌트 - 미니멀리스트 어스 톤

대시보드용 미니멀리스트 미디어 임베드 구성 요소로, 흙색을 사용하여 반응형 디자인과 어두운 테마를 지원합니다. 비디오 플레이어, 제목, 설명 및 채널 정보가 표시됩니다.

열다 미리 보기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="aspect-w-16 aspect-h-9 mb-4">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="rounded-lg"></iframe>
  </div>
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Engaging Data Visualization Techniques</h3>
  <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore innovative ways to present complex data for better insights and decision-making.</p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Channel Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-green-500">
    <span class="text-gray-700 dark:text-gray-300 text-sm">Data Insights Pro</span>
  </div>
</div>

제품 카드 구성 요소

레트로/빈티지 디자인, 유사한 색 구성표 및 대시보드에 적합한 어두운 테마 지원을 갖춘 반응형 제품 카드 구성 요소입니다. 디자인에는 이미지 및 제품 세부 정보에 대한 자리 표시자가 포함됩니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
    Retro Product Dashboard
  </h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
          <button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
      <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
      <div class="p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
          <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
        </div>
      </div>
    </div>
  </div>
</div>

Heat Maps 구성 요소

보색이 있는 반응형 3D 히트 맵 구성 요소로, 블로그 및 콘텐츠 소비에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Monthly Activity Heatmap</h2>
  <div class="grid grid-cols-7 gap-1 ">
    <!-- Days of the week -->
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sun</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Mon</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Tue</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Wed</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Thu</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Fri</div>
    <div class="text-center text-gray-500 dark:text-gray-400 text-xs uppercase">Sat</div>

    <!-- Heatmap cells (example for 4 weeks) -->
    {[...Array(28)].map((_, i) => (
      `<div key={i} class="relative w-8 h-8 md:w-10 md:h-10 transform perspective-1000 -rotate-x-15 rotate-y-15 p-1">
        <div class="absolute inset-0 rounded-md shadow-lg transition-all duration-300 transform
          ${i % 7 === 0 ? "bg-red-500 dark:bg-red-700" : ""}
          ${i % 7 === 1 ? "bg-red-600 dark:bg-red-800" : ""}
          ${i % 7 === 2 ? "bg-orange-500 dark:bg-orange-700" : ""}
          ${i % 7 === 3 ? "bg-orange-600 dark:bg-orange-800" : ""}
          ${i % 7 === 4 ? "bg-red-700 dark:bg-red-900" : ""}
          ${i % 7 === 5 ? "bg-red-800 dark:bg-red-950" : ""}
          ${i % 7 === 6 ? "bg-orange-700 dark:bg-orange-900" : ""}
          hover:scale-110 hover:rotate-x-0 hover:rotate-y-0
          group-hover:opacity-75
          flex items-center justify-center
          text-white text-xs font-bold
          ">
          ${i + 1}
        </div>
      </div>`
    )).join("")}
  </div>
  <div class="mt-4 flex justify-between text-gray-600 dark:text-gray-400">
    <span>Less</span>
    <div class="flex space-x-1">
      <div class="w-4 h-4 bg-red-400 dark:bg-red-600 rounded"></div>
      <div class="w-4 h-4 bg-red-500 dark:bg-red-700 rounded"></div>
      <div class="w-4 h-4 bg-red-600 dark:bg-red-800 rounded"></div>
      <div class="w-4 h-4 bg-red-700 dark:bg-red-900 rounded"></div>
      <div class="w-4 h-4 bg-red-800 dark:bg-red-950 rounded"></div>
    </div>
    <span>More</span>
  </div>
</div>

가격 표시 구성 요소

반응형 디자인, 다크 모드 지원 및 생생한 색 구성표를 갖춘 가격 표시 구성 요소.

열다 미리 보기

                <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>

태그 클라우드 구성 요소(다크 모드, 파스텔)

어두운 모드를 지원하는 반응형 태그 클라우드 구성 요소로, 파스텔 색상을 사용합니다. 포트폴리오에 적합합니다.

열다 미리 보기

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-3xl font-bold text-center mb-8 dark:text-purple-200">Skills & Interests</h2>
    <div class="flex flex-wrap justify-center gap-4">
      <span class="bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-purple-300 dark:hover:bg-purple-600 transition duration-300">
        Web Development
      </span>
      <span class="bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-pink-300 dark:hover:bg-pink-600 transition duration-300">
        UI/UX Design
      </span>
      <span class="bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-blue-300 dark:hover:bg-blue-600 transition duration-300">
        Data Science
      </span>
      <span class="bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-green-300 dark:hover:bg-green-600 transition duration-300">
        Machine Learning
      </span>
      <span class="bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-yellow-300 dark:hover:bg-yellow-600 transition duration-300">
        Photography
      </span>
      <span class="bg-indigo-200 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-indigo-300 dark:hover:bg-indigo-600 transition duration-300">
        Gardening
      </span>
      <span class="bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-red-300 dark:hover:bg-red-600 transition duration-300">
        Travel
      </span>
      <span class="bg-teal-200 text-teal-800 dark:bg-teal-700 dark:text-teal-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-teal-300 dark:hover:bg-teal-600 transition duration-300">
        Cooking
      </span>
      <span class="bg-orange-200 text-orange-800 dark:bg-orange-700 dark:text-orange-100 px-4 py-2 rounded-full shadow-md text-sm font-medium hover:bg-orange-300 dark:hover:bg-orange-600 transition duration-300">
        Reading
      </span>
    </div>
  </div>
</div>

1 ... 133 134 135 136 137 ... 335

검색 구성 요소

카테고리

모든 구성 요소