검색 구성 요소

모든 구성 요소

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

3D_Music_TOC_Component

음악/오디오 플랫폼을 위한 복잡하고 대비가 높은 3D에서 영감을 받은 목차 구성 요소로, 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-900 to-indigo-900 min-h-screen font-sans dark:from-gray-900 dark:to-black text-gray-100">

  <!-- Outer 3D Container -->
  <div class="max-w-6xl mx-auto backdrop-blur-sm bg-purple-800/30 dark:bg-gray-800/30 rounded-3xl p-4 sm:p-6 lg:p-10 shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative overflow-hidden ring-2 ring-purple-500/50 dark:ring-gray-600/50">
    <!-- Decorative light aura -->
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none rounded-3xl" style="background: radial-gradient(circle at 10% 10%, rgba(139, 92, 246, 0.2) 0%, transparent 50%), radial-gradient(circle at 90% 90%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);"></div>

    <!-- Inner Content Area -->
    <div class="relative z-10">
      <header class="mb-8 text-center">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-white drop-shadow-[0_4px_3px_rgba(0,0,0,0.5)] leading-tight">
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-pink-300 to-red-300">🎧 Playlists & Tracks 🎧</span>
        </h1>
        <p class="text-lg sm:text-xl text-purple-200 dark:text-gray-300 mb-6 drop-shadow-[0_2px_2px_rgba(0,0,0,0.4)]">
          Dive into a universe of sound. Explore our curated collections.
        </p>

        <!-- Search Bar with 3D Effect -->
        <div class="relative max-w-xl mx-auto group">
          <input type="text" placeholder="Search playlists or songs..." class="w-full p-3 pl-12 rounded-full bg-purple-700/60 dark:bg-gray-700/60 text-white placeholder-purple-200 dark:placeholder-gray-300 focus:outline-none focus:ring-4 focus:ring-purple-400/70 dark:focus:ring-gray-500/70 shadow-lg transition-all duration-300 transform perspective-1000 rotateX-0 group-hover:rotateX-5 group-hover:shadow-[0_15px_30px_rgba(0,0,0,0.6)]">
          <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-6 h-6 text-purple-300 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>
      </header>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

        <!-- Left Sidebar: Categories/Genres (3D Elevated) -->
        <aside class="bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl p-6 shadow-[0_10px_30px_rgba(0,0,0,0.5)] overflow-hidden relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
          <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Genres & Moods</h2>
          <ul class="space-y-4">
            <li class="relative">
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-compact-disc mr-3"></i>Pop Hits</span>
                <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">345</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-guitar mr-3"></i>Rock Anthems</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">210</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-headphones mr-3"></i>Electronic Vibes</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">188</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-microphone-alt mr-3"></i>Soulful R&B</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">120</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-4 rounded-xl bg-purple-600/70 dark:bg-gray-600/70 text-purple-100 dark:text-gray-200 font-semibold hover:bg-purple-500 dark:hover:bg-gray-500 transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_5px_15px_rgba(0,0,0,0.3)] ring-1 ring-purple-500 dark:ring-gray-500 flex items-center justify-between">
                <span><i class="fa-solid fa-drum mr-3"></i>Hip-Hop Grooves</span>
                 <span class="text-xs bg-purple-800 dark:bg-gray-800 px-2 py-1 rounded-full">98</span>
              </a>
            </li>
          </ul>

          <!-- Featured Artist (Mini-card) -->
          <div class="mt-8 p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.02] relative z-10">
              <h3 class="text-lg font-bold text-white mb-3 flex items-center justify-center"><i class="fa-solid fa-star mr-2 text-yellow-400"></i>Featured Artist</h3>
              <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Artist Avatar" class="w-20 h-20 rounded-full mx-auto mb-3 border-4 border-purple-400 dark:border-gray-500 shadow-md object-cover">
              <p class="text-lg font-semibold text-purple-100 dark:text-gray-200">Lunar Tones</p>
              <a href="#" class="mt-3 inline-block bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-bold shadow-md transition-all duration-200 transform active:scale-95">View Profile</a>
          </div>

        </aside>

        <!-- Main Content: Playlist Sections (Layered 3D Cards) -->
        <main class="lg:col-span-2 space-y-8">

          <!-- Recently Played -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Recently Played <i class="fa-solid fa-history ml-2"></i></h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <!-- Playlist Card 1 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1040/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Chill Lofi Jams</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">45 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
              <!-- Playlist Card 2 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1043/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Workout Energy</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">60 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
              <!-- Playlist Card 3 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1045/300/200" alt="Playlist Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Morning Acoustic</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">30 tracks</p>
                <button class="mt-3 bg-pink-600 hover:bg-pink-700 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-play mr-2"></i>Play</button>
              </div>
            </div>
          </section>

          <!-- New Releases -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">New Releases <i class="fa-solid fa-fire ml-2 text-orange-400"></i></h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
              <!-- Album Card 1 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1025/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">City Lights</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Starlight Echoes</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
              <!-- Album Card 2 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1029/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Oceanic Depths</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Aqua Waves</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
                <!-- Album Card 3 -->
              <div class="p-4 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.03] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://picsum.photos/id/1031/300/200" alt="Album Cover" class="w-full h-32 object-cover rounded-lg mb-3 shadow-md group-hover:shadow-lg transition-shadow duration-200">
                <h3 class="text-lg font-semibold text-white mb-1">Forest Whispers</h3>
                <p class="text-sm text-purple-200 dark:text-gray-300">By Green Groove</p>
                <button class="mt-3 bg-indigo-500 hover:bg-indigo-600 text-white px-5 py-2 rounded-full font-bold shadow-md transform transition-all duration-200 active:scale-95"><i class="fa-solid fa-eye mr-2"></i>Listen</button>
              </div>
            </div>
          </section>

          <!-- Popular Artists -->
          <section class="p-6 bg-purple-700/50 dark:bg-gray-700/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.5)] relative group transform transition-transform duration-300 lg:hover:-translate-y-2 lg:hover:shadow-[0_20px_40px_rgba(0,0,0,0.7)] ring-1 ring-purple-600 dark:ring-gray-600">
            <h2 class="text-2xl font-bold mb-6 text-white border-b-2 border-purple-400 dark:border-gray-500 pb-2">Popular Artists <i class="fa-solid fa-users ml-2"></i></h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
              <!-- Artist Card 1 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Eleanor Ray</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Pop/R&B</p>
              </a>
              <!-- Artist Card 2 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Jaxson Cole</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Hip-Hop</p>
              </a>
              <!-- Artist Card 3 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Seraphina</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Electronic</p>
              </a>
              <!-- Artist Card 4 -->
              <a href="#" class="block p-3 bg-purple-800/80 dark:bg-gray-800/80 rounded-xl text-center shadow-[inset_0_2px_5px_rgba(0,0,0,0.3),0_5px_15px_rgba(0,0,0,0.4)] border border-purple-500 dark:border-gray-600 transform transition duration-300 hover:scale-[1.05] hover:shadow-[inset_0_2px_5px_rgba(0,0,0,0.5),0_10px_25px_rgba(0,0,0,0.6)] group">
                <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-3 border-4 border-pink-400 dark:border-gray-500 shadow-md object-cover group-hover:border-pink-500 transition-colors duration-200">
                <p class="text-lg font-semibold text-white">Rhythmic Soul</p>
                <p class="text-sm text-purple-200 dark:text-gray-300">Jazz/Funk</p>
              </a>
            </div>
          </section>

        </main>
      </div>

      <!-- Footer for additional navigation or info -->
      <footer class="mt-12 text-center text-purple-200 dark:text-gray-400 border-t border-purple-500/50 dark:border-gray-600/50 pt-8">
        <p class="text-sm mb-4">© 2023 AudioVerse. All rights reserved.</p>
        <nav class="space-x-4">
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">About</a>
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Contact</a>
          <a href="#" class="hover:text-purple-100 dark:hover:text-white transition-colors duration-200 text-sm">Privacy</a>
        </nav>
      </footer>

    </div>
  </div>

  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

  <!-- Custom Styles for 3D Transform Properties (Tailwind can't do arbitrary transforms directly) -->
  <style>
    .perspective-1000 {
      perspective: 1000px;
    }
    .rotateX-0 {
      transform: rotateX(0deg);
    }
    .rotateX-5 {
      transform: rotateX(5deg);
    }

    /* Dark mode toggle - For demonstration only, typically handled by JS */
    .dark-mode-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #6d28d9;
      color: white;
      padding: 10px 15px;
      border-radius: 9999px;
      cursor: pointer;
      font-size: 0.875rem;
      z-index: 1000;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      transition: background-color 0.2s ease-in-out;
    }
    .dark-mode-toggle.dark-mode {
      background-color: #4b5563;
    }
  </style>
  <script>
    // This JavaScript is for dark mode toggle functionality demonstration only.
    // In a real application, consider using localStorage and a more robust approach.
    document.addEventListener('DOMContentLoaded', () => {
      const toggleBtn = document.createElement('button');
      toggleBtn.className = 'dark-mode-toggle';
      toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
      document.body.appendChild(toggleBtn);

      function applyTheme(theme) {
        if (theme === 'dark') {
          document.documentElement.classList.add('dark');
          toggleBtn.innerHTML = '<i class="fas fa-sun"></i> Light Mode';
          toggleBtn.classList.add('dark-mode');
        } else {
          document.documentElement.classList.remove('dark');
          toggleBtn.innerHTML = '<i class="fas fa-moon"></i> Dark Mode';
          toggleBtn.classList.remove('dark-mode');
        }
      }

      // Check local storage for theme preference
      const currentTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      applyTheme(currentTheme);

      toggleBtn.addEventListener('click', () => {
        let theme = '';
        if (document.documentElement.classList.contains('dark')) {
          theme = 'light';
        } else {
          theme = 'dark';
        }
        localStorage.setItem('theme', theme);
        applyTheme(theme);
      });
    });
  </script>

</div>

Brutalist_Dating_Dashboard

데이트 및 소셜 플랫폼을 위한 브루탈리즘 스타일의 대시보드 구성 요소로, 대담한 디자인, 높은 대비, 보라색/보라색 색 구성표가 특징입니다. 다크 모드 지원으로 반응형.

열다 미리 보기

                <div class="min-h-screen bg-purple-100 dark:bg-gray-900 text-purple-900 dark:text-purple-100 font-mono p-4 sm:p-8">

  <!-- Brutalist Header -->
  <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-4 border-b-4 border-purple-900 dark:border-purple-600 mb-8">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-wide leading-none mb-4 sm:mb-0">
      <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 mr-2 inline-block">Crush</span><span class="block sm:inline-block">Link</span>
    </h1>
    <nav class="text-lg sm:text-xl font-bold flex flex-wrap gap-x-6 gap-y-2 uppercase">
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Profiles
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Messages
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Likes
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
    </nav>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">

    <!-- Left Sidebar / Profile Section -->
    <section class="md:col-span-1 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">My Profile</h2>
      <div class="flex flex-col items-center text-center">
        <div class="w-32 h-32 sm:w-40 sm:h-40 bg-purple-500 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-600 overflow-hidden relative mb-4 flex items-center justify-center">
          <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
          <div class="absolute bottom-2 right-2 w-6 h-6 sm:w-8 sm:h-8 bg-green-500 border-2 border-purple-900 dark:border-purple-600"></div>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold mb-2 uppercase">Synthya 'Violet' Wave</h3>
        <p class="text-lg sm:text-xl font-bold mb-4 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 -skew-x-12 inline-block">28, Musician</p>
        <p class="text-base mb-6 italic">"Seeking a connection as deep as a synth bassline. Let's make some noise together."</p>
        <div class="flex gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Edit Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View Public</button>
        </div>
      </div>
    </section>

    <!-- Main Content Area -->
    <section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">

      <!-- New Matches / Recommendations -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">New Crushes</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

          <!-- Match Card 1 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Alex 'Byte' Flow</h3>
            <p class="text-sm mb-3">29, Developer</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

          <!-- Match Card 2 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Luna 'Rift' Star</h3>
            <p class="text-sm mb-3">31, Artist</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

        </div>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Discover More</button>
      </div>

      <!-- Recent Activity / Messages -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Recent Waves</h2>
        <ul class="space-y-4">

          <!-- Activity Item 1 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Kai 'Glitch' Spark</p>
              <p class="text-sm mt-1">Sent you a <span class="font-bold text-purple-900 dark:text-purple-300">new message</span>: "Hey, loved your bio! Wanna chat?"</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">2 minutes ago</span>
            </div>
          </li>

          <!-- Activity Item 2 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Zara 'Pulse' Beat</p>
              <p class="text-sm mt-1">Liked your <span class="font-bold text-purple-900 dark:text-purple-300">recent photo</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">1 hour ago</span>
            </div>
          </li>

          <!-- Activity Item 3 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Neo 'Code' Matrix</p>
              <p class="text-sm mt-1">Viewed your <span class="font-bold text-purple-900 dark:text-purple-300">profile</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">5 hours ago</span>
            </div>
          </li>

        </ul>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View All Activity</button>
      </div>

      <!-- Statistics / Quick Links -->
      <div class="lg:col-span-2 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Your Stats // Quick Access</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <!-- Stat Card 1 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">42</p>
            <p class="text-sm sm:text-base uppercase">New Likes</p>
          </div>
          <!-- Stat Card 2 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">18</p>
            <p class="text-sm sm:text-base uppercase">Unread Messages</p>
          </div>
          <!-- Stat Card 3 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">5</p>
            <p class="text-sm sm:text-base uppercase">New Matches</p>
          </div>
          <!-- Stat Card 4 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">124</p>
            <p class="text-sm sm:text-base uppercase">Profile Views</p>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Boost Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Go Incognito</button>
        </div>
      </div>

    </section>
  </main>

  <!-- Brutalist Footer -->
  <footer class="mt-8 py-4 text-center border-t-4 border-purple-900 dark:border-purple-600 text-sm sm:text-base uppercase font-bold">
    <p>&copy; 2023 CrushLink Inc. All Rights Reserved. <span class="font-normal italic">No love lost.</span></p>
  </footer>

</div>

미디어 임베드 컴포넌트

블로그/콘텐츠 소비를 위한 복잡하고 반응이 빠른 미디어 임베드 구성 요소로, 유기적/자연에서 영감을 받은 디자인, 보석 색조 및 다크 모드 지원을 특징으로 합니다. 비디오 플레이어, 기사 콘텐츠 및 관련 미디어가 포함됩니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-slate-900 dark:to-teal-950 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto rounded-3xl overflow-hidden shadow-2xl relative bg-white dark:bg-gray-800 border border-emerald-200 dark:border-teal-700 backdrop-blur-sm bg-opacity-90 dark:bg-opacity-90">
    <!-- Organic Top Shape -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 1440 600" preserveAspectRatio="none">
        <path fill="url(#flowyGradient)" d="M0,224C0,224,374.8,2.7,720,0c345.2,-2.7,720,224,720,224L1440,600L0,600L0,224Z"></path>
        <defs>
          <linearGradient id="flowyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#34D399" />
            <stop offset="100%" stop-color="#10B981" />
          </linearGradient>
        </defs>
      </svg>
    </div>

    <div class="relative z-10 p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- Main Content Area -->
      <div class="lg:col-span-2 space-y-8">
        <!-- Video Embed Area -->
        <div class="relative pb-[56.25%] h-0 rounded-2xl overflow-hidden shadow-xl border border-emerald-300 dark:border-teal-600 transform scale-[0.99] hover:scale-100 transition-transform duration-300 ease-in-out">
          <iframe class="absolute top-0 left-0 w-full h-full rounded-2xl" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=WpIK1mX4qIK0wK2X" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>

        <!-- Article Details & Content -->
        <article class="space-y-6 text-lg leading-relaxed">
          <header class="space-y-4">
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-emerald-800 dark:text-emerald-300 capitalize tracking-tight leading-snug">
              The Serene Dance of Emerald Forests
            </h1>
            <div class="flex items-center space-x-4 text-emerald-600 dark:text-teal-400 text-sm">
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full object-cover border-2 border-emerald-400 dark:border-teal-500 shadow-md"/>
                <span>By Sarah Green</span>
              </div>
              <span>•</span>
              <span>October 26, 2023</span>
              <span>•</span>
              <span>8 min read</span>
            </div>
          </header>

          <p class="text-gray-700 dark:text-gray-300 first-letter:text-5xl first-letter:font-bold first-letter:float-left first-letter:mr-3 first-letter:text-emerald-700 dark:first-letter:text-teal-400">
            In the heart of ancient lands, where the veil between worlds thins, lies a realm of unparalleled beauty – the Emerald Forests. Here, sunlight filters through a canopy of vibrant leaves, painting the forest floor in shifting patterns of gold and green. The air is thick with the scent of damp earth and blooming wildflowers, carried on a gentle breeze that whispers secrets through the rustling foliage.
          </p>
          <p class="text-gray-700 dark:text-gray-300">
            Towering trees, their roots deeply intertwined, form natural cathedrals. Moss-covered rocks, worn smooth by centuries of rain, punctuate crystal-clear streams that meander through the landscape, their murmuring currents a soothing melody. This verdant sanctuary is a testament to nature's enduring power and delicate balance, a symphony of life playing out in vibrant hues.
          </p>
          <blockquote class="p-4 border-l-4 border-emerald-500 dark:border-teal-400 text-gray-700 dark:text-gray-300 italic rounded-r-lg bg-emerald-50 dark:bg-teal-900 shadow-inner">
            "Nature does not hurry, yet everything is accomplished." – Lao Tzu
          </blockquote>
          <p class="text-gray-700 dark:text-gray-300">
            From the smallest beetle scuttling through fallen leaves to the majestic deer grazing in sun-dappled clearings, every creature plays a vital role in this thriving ecosystem. Birds with plumage like living jewels flit between branches, their songs echoing through the silence, adding to the immersive experience. It's a place where time slows, allowing one to truly connect with the rhythms of the earth.
          </p>
          <h2 class="text-2xl sm:text-3xl font-bold text-emerald-700 dark:text-emerald-400 mt-8 mb-4">The Flow of Life's Energies</h2>
          <p class="text-gray-700 dark:text-gray-300">
            The very essence of the Emerald Forests is its flow – the cyclical dance of growth and decay, the ceaseless movement of water and air, the interconnectedness of all living things. This natural rhythm inspires a sense of profound peace and understanding, reminding us of our own place within the grand tapestry of existence. Observing the intricate patterns of a fern, or the graceful bend of a willow by a stream, reveals lessons in resilience and adaptation.
          </p>
        </article>
      </div>

      <!-- Sidebar Area -->
      <aside class="space-y-8">
        <!-- Related Content -->
        <section class="bg-emerald-50 dark:bg-gray-900 p-6 rounded-2xl shadow-lg border border-emerald-200 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-700 dark:text-emerald-400">More from Nature's Embrace</h2>
          <ul class="space-y-4">
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=1" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Whispers of the Ancient Woods
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A deep dive into old-growth forests.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=2" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Rivers of Sapphire: Journey Through Waterways
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">Exploring the lifeblood of ecosystems.</p>
              </div>
            </li>
            <li class="flex items-center space-x-4 border-b pb-4 last:border-b-0 last:pb-0 border-emerald-200 dark:border-teal-800">
              <img src="https://picsum.photos/100/70?random=3" alt="Related media" class="w-20 h-14 object-cover rounded-md shadow-sm border border-emerald-100 dark:border-teal-700"/>
              <div class="flex-1">
                <a href="#" class="block text-md font-semibold text-emerald-600 dark:text-teal-400 hover:text-emerald-800 dark:hover:text-amber-300 transition-colors duration-200">
                  Ruby Sunset: The Colors of Wildlife
                </a>
                <p class="text-sm text-gray-500 dark:text-gray-400">A photographic essay on vibrant animal life.</p>
              </div>
            </li>
          </ul>
        </section>

        <!-- Newsletter Signup -->
        <section class="bg-emerald-100 dark:bg-emerald-950 p-6 rounded-2xl shadow-lg border border-emerald-300 dark:border-teal-600 transform hover:scale-[1.01] transition-transform duration-300 ease-out">
          <h2 class="text-xl font-bold mb-4 text-emerald-800 dark:text-emerald-300">Embrace the Flow with Our Newsletter</h2>
          <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">
            Join our community for weekly insights into nature, sustainability, and mindful living.
          </p>
          <form class="space-y-4">
            <input type="email" placeholder="[email protected]" class="w-full p-3 rounded-lg border border-emerald-400 dark:border-teal-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 focus:border-transparent transition-all duration-200 placeholder-gray-400 dark:placeholder-gray-500" aria-label="Email address for newsletter signup" required />
            <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-xl shadow-md transition-colors duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-teal-400 dark:focus:ring-offset-gray-900">
              Subscribe Now
            </button>
          </form>
        </section>
      </aside>
    </div>
  </div>
</div>

스큐어모픽 맨 위로 돌아가기 버튼

포럼/커뮤니티 플랫폼을 위한 간단하고 반응이 빠르며 스큐어모픽한 'Back to Top' 버튼 구성 요소로, 포레스트/그린 색상 팔레트와 완전한 다크 모드 지원으로 설계되었습니다.

열다 미리 보기

                <div class="fixed bottom-6 right-6 z-50">
  <button aria-label="Scroll to top" class="group outline-none focus:ring-4 focus:ring-green-700/50 dark:focus:ring-green-300/50 rounded-full transition-all duration-300 ease-in-out">
    <div class="p-4 rounded-full
      bg-gradient-to-br from-green-500 to-green-700
      dark:from-green-700 dark:to-green-900
      shadow-lg transition-all duration-300 ease-in-out
      shadow-green-800/60 dark:shadow-green-950/60
      group-hover:from-green-400 group-hover:to-green-600
      dark:group-hover:from-green-600 dark:group-hover:to-green-800
      active:from-green-600 active:to-green-800
      dark:active:from-green-800 dark:active:to-green-950
      active:shadow-inner active:shadow-green-900/50
      dark:active:shadow-green-950/50
      relative overflow-hidden cursor-pointer
      w-16 h-16 md:w-20 md:h-20 flex items-center justify-center
      ">
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white shadow-text transform -translate-y-0.5
        group-hover:-translate-y-1.5 transition-transform duration-300 ease-in-out
        " fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      <!-- Highlight effect on hover (skeuomorphic shine) -->
      <div class="absolute inset-0 rounded-full
        bg-gradient-to-br from-white/20 via-transparent to-transparent
        opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out
        pointer-events-none
        dark:from-white/10
        "></div>
      <!-- Inner shadow for depth -->
      <div class="absolute inset-0 rounded-full
        shadow-inner shadow-green-900/30 dark:shadow-black/30
        "></div>
    </div>
  </button>
</div>

전자 상거래 단색 경고

전자 상거래를 위한 간단하고 반응이 빠른 경고 메시지 구성 요소로, 단색 색 구성표와 해제를 위한 미묘한 마이크로 상호 작용이 특징입니다. 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-700 text-blue-800 dark:text-blue-100 shadow-md rounded-lg mx-auto max-w-sm sm:max-w-md md:max-w-xl flex items-start justify-between transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
  <div class="flex items-center">
    <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 animate-bounce-in" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <div class="text-sm sm:text-base font-medium leading-relaxed">
      <p class="mb-1 font-semibold">Item Added to Cart!</p>
      <p class="text-blue-700 dark:text-blue-200">Your selected product has been successfully added.</p>
    </div>
  </div>
  <button class="ml-4 p-2 transition-all duration-200 ease-linear rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 group">
    <svg class="h-5 w-5 text-blue-600 dark:text-blue-300 group-hover:rotate-90 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
</div>

<style>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out both;
  }
</style>

제품 리뷰 구성 요소

산업용, 원자재 디자인, 차분한 레트로/빈티지 색상 팔레트 및 날씨/기후 응용 분야에 적합한 다크 모드 지원을 갖춘 반응형 제품 리뷰 구성 요소입니다.

열다 미리 보기

                <section class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-gray-300 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-400 mb-4 tracking-tight uppercase">
        Customer Insights
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300">
        What users say about our <span class="font-bold text-yellow-700 dark:text-yellow-500">Atmospheric Sensor Pro</span>.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 p-6 sm:p-8 lg:p-10">
      <!-- Overall Rating Section -->
      <div class="md:col-span-1 border-r md:border-b-0 md:border-r border-gray-300 dark:border-gray-700 pr-8 md:pr-0 pb-8 md:pb-0">
        <div class="sticky top-8 lg:top-10">
          <h3 class="text-2xl font-bold mb-4 text-blue-700 dark:text-blue-300 uppercase">Overall Rating</h3>
          <div class="flex items-center mb-2">
            <p class="text-6xl font-extrabold text-yellow-700 dark:text-yellow-500 mr-2">4.7</p>
            <div class="text-yellow-600 dark:text-yellow-400 flex text-2xl">
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
              <svg class="w-6 h-6 fill-current text-gray-500 dark:text-gray-400" viewBox="0 0 24 24"><path d="M12 2.587l1.096 2.224 2.457.357-1.782 1.74.42 2.449L12 8.922l-2.191 1.152.42-2.449-1.782-1.74 2.457-.357L12 2.587zM12 0l-3.328 6.721L0 7.228l4.981 4.85-1.173 6.84L12 16.32l8.192 4.316-1.173-6.84L24 7.228l-8.672-.493L12 0z"/></svg>
            </div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-400">Based on <span class="font-bold">1,234 reviews</span></p>
          <div class="mt-6 space-y-2">
            <div class="flex items-center">
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">5 Star</span>
              <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
                <div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
              </div>
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">90%</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">4 Star</span>
              <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
                <div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 70%"></div>
              </div>
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">70%</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">3 Star</span>
              <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
                <div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 30%"></div>
              </div>
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">30%</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">2 Star</span>
              <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
                <div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 10%"></div>
              </div>
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">10%</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 mr-2">1 Star</span>
              <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
                <div class="bg-yellow-600 dark:bg-yellow-400 h-2.5 rounded-full" style="width: 5%"></div>
              </div>
              <span class="text-sm font-bold text-gray-700 dark:text-gray-300 ml-2">5%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Individual Reviews Section -->
      <div class="md:col-span-2 space-y-8">
        <h3 class="text-2xl font-bold text-blue-700 dark:text-blue-300 uppercase">Recent Reviews</h3>

        <!-- Review 1 -->
        <article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
              src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Eleanor Vance</h4>
              <div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current text-gray-500 dark:text-gray-400" viewBox="0 0 24 24"><path d="M12 2.587l1.096 2.224 2.457.357-1.782 1.74.42 2.449L12 8.922l-2.191 1.152.42-2.449-1.782-1.74 2.457-.357L12 2.587zM12 0l-3.328 6.721L0 7.228l4.981 4.85-1.173 6.84L12 16.32l8.192 4.316-1.173-6.84L24 7.228l-8.672-.493L12 0z"/></svg>
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">4.0 stars</span>
              </div>
            </div>
          </div>
          <h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Absolutely crucial for outdoor enthusiasts!"</h5>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
            I've been using this atmospheric sensor for my hiking trips, and it's incredibly accurate. Provides real-time humidity, temperature, and pressure readings. The build quality feels very robust, like it can handle any weather. Highly recommend for serious meteorology buffs or anyone who needs precise environmental data.
          </p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <p class="mr-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
            <button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
              <svg class="w-5 h-5 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="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
              Helpful (12)
            </button>
          </div>
          <div class="mt-4 border-t border-gray-400 dark:border-gray-600 pt-4">
            <img src="https://picsum.photos/300/200?random=1" alt="Product image from review" class="w-full sm:w-64 h-auto rounded-md object-cover border border-gray-500 dark:border-gray-600 shadow-md">
          </div>
        </article>

        <!-- Review 2 -->
        <article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
              src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Robertson</h4>
              <div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">5.0 stars</span>
              </div>
            </div>
          </div>
          <h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Unmatched precision for my weather station!"</h5>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
            As an amateur meteorologist, I'm always looking for reliable instruments. This sensor exceeded my expectations, providing consistent and precise data that integrates seamlessly with my existing home weather station software. The durable, industrial design is a huge plus.
          </p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <p class="mr-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
            <button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
              <svg class="w-5 h-5 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="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
              Helpful (9)
            </button>
          </div>
        </article>

        <!-- Review 3 -->
        <article class="bg-gray-300 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full ring-2 ring-yellow-700 dark:ring-yellow-500 mr-4 object-cover"
              src="https://randomuser.me/api/portraits/women/67.jpg" alt="Reviewer Avatar">
            <div>
              <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sandra Chen</h4>
              <div class="flex items-center text-yellow-600 dark:text-yellow-400 mt-1">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.425L24 9.388l-6 5.86 1.416 8.35L12 18.892l-7.416 3.71L6 15.248l-6-5.86 8.332-1.376z"/></svg>
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">3.0 stars</span>
              </div>
            </div>
          </div>
          <h5 class="text-xl font-bold text-blue-800 dark:text-blue-400 mb-2">"Good for basic monitoring, but connectivity issues."</h5>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
            The sensor provides accurate readings for temperature and humidity. It's built like a tank. However, I've had some occasional issues with it maintaining a stable connection to my network, which can be frustrating. Otherwise, it's a solid piece of gear for environmental sensing.
          </p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <p class="mr-4">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
            <button class="flex items-center text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 font-bold">
              <svg class="w-5 h-5 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="2" d="M14 11V3m0 8l-3.293 3.293a1 1 0 01-1.414 0l-3.293-3.293m0 0l3.293 3.293a1 1 0 011.414 0l3.293-3.293m7.586-3.293a1 1 0 00-1.414 0l-3.293 3.293m0 0l3.293 3.293a1 1 0 001.414 0l3.293-3.293"></path></svg>
              Helpful (5)
            </button>
          </div>
        </article>

        <div class="text-center mt-8">
          <button class="px-8 py-3 bg-blue-700 hover:bg-blue-800 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold rounded-lg uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 shadow-lg border border-blue-800 dark:border-blue-600">
            Load More Reviews
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

Event_Conference_Schedule

반응형 이벤트/컨퍼런스 일정 구성 요소로, 종이/인쇄물에서 영감을 받은 디자인과 포레스트 그린 색상 팔레트가 적용되어 있으며, 다크 모드 지원이 포함됩니다. 다른 요일에 대한 탭 탐색과 확장 가능한 세션 세부 정보가 특징입니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">

  <!-- Schedule Header -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-green-900 dark:text-green-300 mb-2 tracking-tight drop-shadow-sm">Conference Schedule</h1>
    <p class="text-lg sm:text-xl text-green-700 dark:text-green-400 font-medium">Stay informed about all the exciting sessions.</p>
  </div>

  <!-- Schedule Container - Mimics a printed page -->
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border border-green-200 dark:border-gray-700">

    <!-- Page texture/border element -->
    <div class="absolute inset-0 border-4 border-dashed border-green-100 dark:border-gray-750 rounded-lg pointer-events-none"></div>

    <div class="p-4 sm:p-6 lg:p-8 relative z-10">

      <!-- Day Tabs Navigation -->
      <div role="tablist" aria-label="Conference Days" class="flex flex-wrap justify-center mb-6 border-b border-green-200 dark:border-gray-700">
        <button role="tab" id="tab-day1" aria-controls="panel-day1" aria-selected="true" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-800 dark:text-green-300 border-b-4 border-green-600 dark:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-900 dark:hover:text-green-200 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 1</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
        <button role="tab" id="tab-day2" aria-controls="panel-day2" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 2</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
        <button role="tab" id="tab-day3" aria-controls="panel-day3" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 3</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
      </div>

      <!-- Schedule Content for Day 1 -->
      <div id="panel-day1" role="tabpanel" aria-labelledby="tab-day1" class="space-y-6">

        <!-- Session Item 1 -->
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Opening Keynote: The Future of Sustainable Tech</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T09:00">09:00 AM</time> - <time datetime="2024-10-27T10:00">10:00 AM</time> | Grand Ballroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Alice Johnson</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">Join Dr. Alice Johnson, a leading innovator in sustainable technologies, as she outlines the challenges and opportunities for a greener future. This session will explore cutting-edge advancements and their potential impact on our planet.</p>
            <p>Topics include renewable energy solutions, eco-friendly materials, and circular economy principles. A Q&A session will follow the presentation.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Session Item 2 -->
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relative">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Workshop: Hands-on AI for Environmental Monitoring</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T10:30">10:30 AM</time> - <time datetime="2024-10-27T12:00">12:00 PM</time> | Innovation Lab</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Ben Carter</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">This interactive workshop will guide participants through building and deploying AI models for real-world environmental data analysis. Bring your laptops for a practical session on data collection, feature engineering, and model training.</p>
            <p>Prerequisites: Basic understanding of Python and data science concepts. Limited seating available. Pre-registration recommended.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Lunch Break -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-4 sm:p-6 text-center shadow-md border border-green-300 dark:border-gray-600">
          <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1">Lunch Break</h3>
          <p class="text-base text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T12:00">12:00 PM</time> - <time datetime="2024-10-27T13:00">01:00 PM</time> | Conference Dining Hall</p>
        </div>

      </div>

      <!-- Schedule Content for Day 2 (hidden by default) -->
      <div id="panel-day2" role="tabpanel" aria-labelledby="tab-day2" class="space-y-6 hidden">
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Panel: Green Investments and Impact Funding</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-28T09:30">09:30 AM</time> - <time datetime="2024-10-28T10:30">10:30 AM</time> | Executive Boardroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm -ml-4">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Multiple Speakers</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">A moderated discussion with leading investors and fund managers on the growing landscape of green investments, ESG criteria, and how to effectively fund sustainable projects for maximum impact and returns.</p>
            <p>Panelists will share insights on emerging markets, risk assessment, and the future of responsible investing.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Schedule Content for Day 3 (hidden by default) -->
      <div id="panel-day3" role="tabpanel" aria-labelledby="tab-day3" class="space-y-6 hidden">
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Closing Ceremony & Future Initiatives</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-29T15:00">03:00 PM</time> - <time datetime="2024-10-29T16:00">04:00 PM</time> | Grand Ballroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Organizer Team</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">Join us for the closing ceremony to reflect on the insights gained, key takeaways, and discuss the collective impact. We will also announce future initiatives and opportunities for collaboration based on this year's themes.</p>
            <p>Networking reception to follow. Don't miss this opportunity to connect with fellow attendees and speakers.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Simple Script for Tab and Accordion Functionality -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabButtons = document.querySelectorAll('.tab-button');
      const tabPanels = document.querySelectorAll('[role="tabpanel"]');
      const expandButtons = document.querySelectorAll('.expand-button');

      // Tab functionality
      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          const targetPanelId = button.getAttribute('aria-controls');

          // Deactivate all tabs and hide all panels
          tabButtons.forEach(btn => {
            btn.setAttribute('aria-selected', 'false');
            btn.classList.remove('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
            btn.classList.add('border-transparent');
          });
          tabPanels.forEach(panel => panel.classList.add('hidden'));

          // Activate clicked tab and show its panel
          button.setAttribute('aria-selected', 'true');
          button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
          button.classList.remove('border-transparent');
          document.getElementById(targetPanelId).classList.remove('hidden');
        });

        // Set initial active tab state (Day 1)
        if (button.getAttribute('aria-selected') === 'true') {
            button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
            button.classList.remove('border-transparent');
        }
      });

      // Accordion functionality
      expandButtons.forEach(button => {
        button.addEventListener('click', () => {
          const isExpanded = button.getAttribute('aria-expanded') === 'true';
          button.setAttribute('aria-expanded', !isExpanded);

          // Toggle text within the button
          const hideText = button.querySelector('.expand-text-hide');
          const showText = button.querySelector('.expand-text-show');

          if (isExpanded) {
            hideText.classList.remove('hidden');
            showText.classList.add('hidden');
          } else {
            hideText.classList.add('hidden');
            showText.classList.remove('hidden');
          }
        });
      });
    });
  </script>
</div>

Activity Feed 구성 요소

이벤트 및 컨퍼런스 웹 사이트를 위한 유기적/자연에서 영감을 받은 활동 피드 구성 요소로, 흐르는 선, 흙색 및 풍부한 대화형 요소를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-850 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <!-- Organic top border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-green-700 via-amber-700 to-green-700 origin-bottom scale-y-75 rounded-t-lg -skew-x-12 opacity-75 dark:opacity-50 blur-sm"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2 sm:mb-4 relative z-10">Event Activity Feed</h2>
      <p class="text-lg text-stone-600 dark:text-stone-300 mb-6 sm:mb-8 border-b border-stone-300 dark:border-stone-700 pb-4">Stay up-to-date with the latest happenings at Nature's Summit 2024.</p>

      <div class="space-y-8">

        <!-- Activity Item 1 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-green-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Dr. Elara Vance <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@elaravance</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Just concluded a thrilling discussion on 'Sustainable Ecosystems'! The insights from the audience were truly inspiring. #NaturesSummit2024 #Sustainability</p>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-600 transition-colors"><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="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.916 9.916 0 01-2.903-.555L5 21l1.618-3.109A9.956 9.956 0 0112 12c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8a9.956 9.956 0 011.618 3.109L3 21l3.109-1.618A9.956 9.956 0 0112 12z"></path></svg> 12 Comments</a>
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-amber-100 dark:bg-amber-700 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-600 transition-colors"><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="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 24 Likes</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">2 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 2 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-blue-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Botanist Ben <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@plantwhisperer</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">New photo added! Exploring the local flora on the 'Forest Secrets' nature walk. So much beauty in every corner! 🌲🌿</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=1" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group sm:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=2" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group lg:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=3" alt="Nature Photo">
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">4 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 3 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-yellow-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Conference Schedule Update <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@summitadmin</span></p>
            <div class="p-4 rounded-lg bg-emerald-100 dark:bg-emerald-800 border border-emerald-200 dark:border-emerald-700 flex items-center justify-between flex-wrap gap-3">
              <div>
                <p class="font-bold text-emerald-800 dark:text-emerald-100">Room Change for 'Future of Forests' Session!</p>
                <p class="text-sm text-emerald-700 dark:text-emerald-200">The session 'The Future of Forests' with Dr. Anya Sharma has been moved to <span class="font-semibold">Oak Hall (Room 305)</span> at 14:00.</p>
              </div>
              <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white transition-colors">
                View Updated Schedule
                <svg class="w-4 h-4 ml-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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">6 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 4 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-purple-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">EcoWarrior Lily <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@lily_eco_quest</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Engaging panel on 'Climate Action for All'! Feeling so motivated to make a difference. Let's work together for a greener future! 🌍</p>
            <div class="mt-3">
              <video controls class="w-full h-auto rounded-lg shadow-md border border-stone-300 dark:border-stone-700" poster="https://picsum.photos/400/250?random=4">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-violet-100 dark:bg-violet-700 text-violet-800 dark:text-violet-200 hover:bg-violet-200 dark:hover:bg-violet-600 transition-colors"><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="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M18.364 18.364l-.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H4m1.636-6.364l.707-.707M6 10v4a2 2 0 002 2h3.586a1 1 0 00.707-.293l2.414-2.414a1 1 0 00-.707-1.707L12 9l-.586-.586A2 2 0 009 8h-3a2 2 0 00-2 2z"></path></svg> Share Event</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">11 hours ago</p>
          </div>
        </div>

      </div>

      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-stone-850 transform transition-transform duration-200 ease-out hover:scale-105 active:scale-95">
          Load More Activities
          <svg class="ml-3 -mr-1 h-5 w-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="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>

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

미니멀리스트 그레이스케일 오류 메시지

미니멀하고 반응이 빠른 그레이스케일 오류 메시지 구성 요소는 스포츠/피트니스 애플리케이션용으로 설계되었으며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 text-center transition-colors duration-300 ease-in-out">
    <div class="mb-6 flex justify-center text-red-500">
      <svg class="h-16 w-16 md:h-20 md:w-20 stroke-current" fill="none" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
    </div>
    <h2 class="text-2xl md:text-3xl font-semibold mb-3 text-gray-900 dark:text-gray-50 leading-tight">
      Oops! Training Session Not Found
    </h2>
    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
      It seems the workout you're looking for has been moved, deleted, or never existed.
      Don't let it break your sweat, try searching again or browse our fitness library.
    </p>
    <div class="flex flex-col sm:flex-row justify-center gap-3">
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-800 dark:bg-gray-100 hover:bg-gray-900 dark:hover:bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:text-gray-900">
        Go to Dashboard
      </a>
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
        Try Again
      </a>
    </div>
  </div>
</div>

미니멀리스트 미디어 구성 요소

비즈니스/기업 웹사이트를 위한 간단하고 깨끗하며 반응이 빠른 미디어 구성 요소로, 사탕/달콤한 색상 및 다크 모드를 지원합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md mx-auto bg-pink-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-2xl lg:max-w-4xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/400/300?random=1" alt="Modern business workspace">
      </div>
      <div class="p-4 md:p-6">
        <div class="uppercase tracking-wide text-sm text-pink-500 dark:text-pink-400 font-semibold">Company News</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline transition-colors duration-300">Innovative Solutions for Future Growth</a>
        <p class="mt-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">Our latest report highlights key strategies and technological advancements that are set to redefine industry standards. Discover how we're shaping tomorrow's landscape.</p>
        <div class="mt-4 flex items-center">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar">
          </div>
          <div class="ml-3 text-sm text-gray-600 dark:text-gray-400">
            <p class="font-medium">Jane Doe</p>
            <p>CEO, Tech Innovations</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 14 15 16 17 18 ... 335

검색 구성 요소

카테고리

모든 구성 요소