Search Components

All Components

Browse all available Tailwind CSS components

Notifications Component - Industrial Music/Audio

A responsive notifications component with an industrial, raw aesthetic, high contrast colors, and dark mode support, suitable for music and audio platforms. Features unread/read states and interactive elements.

Open Preview

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 shadow-xl dark:shadow-2xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="flex justify-between items-center p-4 sm:p-6 border-b border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-500 tracking-wide uppercase">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-stone-600 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 font-medium px-3 py-1 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Mark all as read
      </button>
    </div>

    <ul class="divide-y divide-stone-200 dark:divide-stone-700">
      <!-- Unread Notification 1: New Release -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-md object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1040/90/90" alt="Album Cover">
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">NEW RELEASE</p>
            <p class="font-bold text-lg leading-tight mb-1">'Neon City Beats' by <span class="text-red-700 dark:text-red-500">Synthwave Savant</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Their latest album just dropped! Dive into a symphony of retro-futuristic sounds. Available now.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Listen Now" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Listen Now
              </button>
              <button aria-label="Dismiss" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Dismiss
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">5 minutes ago</p>
      </li>

      <!-- Read Notification 1: Artist Followed -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">ARTIST UPDATE</p>
            <p class="font-semibold text-lg leading-tight mb-1"><span class="text-red-700 dark:text-red-500">Echoes of Tomorrow</span> just uploaded 3 new tracks!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Check out their latest experimental soundscapes: 'Quantum Leap,' 'Urban Decay,' and 'Spectral Bloom.'</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">View Artist Profile</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 hour ago</p>
      </li>

      <!-- Unread Notification 2: Playlist Recommendation -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-red-600 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4zm3-5H9v2h4v-2z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">RECOMMENDED FOR YOU</p>
            <p class="font-bold text-lg leading-tight mb-1">Fresh Playlist: <span class="text-red-700 dark:text-red-500">'Industrial Echoes'</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Based on your recent listening, we've curated a new playlist featuring raw, gritty electronic sounds.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Explore Playlist" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Explore Playlist
              </button>
              <button aria-label="Not Interested" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Not Interested
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 hours ago</p>
      </li>

      <!-- Read Notification 2: System Update -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-stone-600 dark:text-stone-400 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99H9S8.5 12 8 12.5s-1 1-1 1.5.5 1 .5 1.5 1 1 1.5 1 1.5.5 1.5 1 0 .5-1 .5H9c-1.1 0-2 .9-2 2s.9 2 2 2h6c1.1 0 2.2-.95 2-2 0 0 .04-.32 0-.5C16.89 16.53 16.5 16 16 16s-1-.5-1-1c0-.5-.5-1-1-1h-1v-2c0-.5-.5-1-1-1H12v-1.01z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">SYSTEM ANNOUNCEMENT</p>
            <p class="font-semibold text-lg leading-tight mb-1">Platform Update: <span class="text-red-700 dark:text-red-500">Enhanced Audio Playback</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">We've rolled out improvements to audio streaming quality and stability across all devices.</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Read More</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 day ago</p>
      </li>

      <!-- Read Notification 3: Community Event -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/400/90/90" alt="Event Banner">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">COMMUNITY NEWS</p>
            <p class="font-semibold text-lg leading-tight mb-1">Join our <span class="text-red-700 dark:text-red-500">Live DJ Set</span> this Friday!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Prepare for an electrifying industrial techno set from DJ 'Circuit Breaker'. Don't miss it!</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Set Reminder</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 days ago</p>
      </li>
    </ul>

    <div class="p-4 sm:p-6 border-t border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-center">
      <button aria-label="Load more notifications" class="text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400 text-base font-semibold focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Load More
      </button>
    </div>
  </div>
</div>

Dark Mode Media Navigation

A complex, responsive navigation component for entertainment/media platforms, featuring a dark mode UI with a forest/green color palette. Includes a logo, search bar, navigation links, user profile, and a notification bell.

Open Preview

                <nav class="bg-zinc-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 shadow-lg dark:shadow-xl">
  <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
    <!-- Logo Section -->
    <div class="flex items-center space-x-3 mb-2 md:mb-0">
      <svg class="h-9 w-9 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10l-3-3m0 0l-3 3m3-3V4m3 10h4.876a.625.625 0 01.352 1.157l-1.587 1.587A.625.625 0 0115.124 18H10z" />
      </svg>
      <span class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-green-600">StreamVerse</span>
    </div>

    <!-- Search Bar -->
    <div class="relative flex-grow mx-4 max-w-lg w-full mb-2 md:mb-0">
      <input type="text" placeholder="Search movies, series, and more..." class="w-full py-2 pl-10 pr-4 rounded-full bg-zinc-800 dark:bg-gray-800 text-gray-200 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 ease-in-out">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Movies
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Series
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Live TV
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Profile and Notifications -->
    <div class="flex items-center space-x-6 ml-auto">
      <button class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 focus:outline-none">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-sm font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </button>
      <div class="relative group">
        <img class="h-10 w-10 rounded-full border-2 border-emerald-500 object-cover cursor-pointer" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-zinc-800 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden z-10">
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden ml-4">
      <button class="text-gray-300 hover:text-emerald-400 focus:outline-none peer">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
      <!-- Mobile Menu Content -->
      <div class="hidden peer-focus:block absolute top-full left-0 w-full bg-zinc-800 dark:bg-gray-800 shadow-lg py-2 mt-1 z-20 transition-all duration-300 ease-out origin-top">
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Home</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Movies</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Series</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Live TV</a>
        <div class="border-t border-gray-700 my-2"></div>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
      </div>
    </div>
  </div>
</nav>

360_viewer_industrial_finance

A simple, responsive 360° viewer component with an industrial, raw aesthetic and a gradient rainbow color scheme, designed for finance and banking interfaces. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform
              bg-gradient-to-br from-red-400 via-yellow-400 to-green-400
              dark:from-red-700 dark:via-purple-700 dark:to-blue-700
              p-0.5">
    <div class="bg-zinc-800 dark:bg-zinc-950 rounded-xl p-6 sm:p-8 lg:p-10 border-t border-b border-zinc-700 dark:border-zinc-800">
      <div class="flex flex-col md:flex-row items-center gap-6 sm:gap-8 lg:gap-10">
        <!-- Left Section: 360 Viewer Placeholder -->
        <div class="w-full md:w-2/3 relative aspect-video bg-zinc-700 dark:bg-zinc-800 rounded-lg overflow-hidden border border-zinc-600 dark:border-zinc-700 shadow-inner flex items-center justify-center">
          <img src="https://picsum.photos/800/450?random=1" alt="360-degree financial product view" class="absolute inset-0 w-full h-full object-cover opacity-70 filter grayscale brightness-75">
          <div class="absolute inset-0 bg-gradient-to-br from-red-500/30 via-yellow-500/30 to-green-500/30 dark:from-red-800/30 dark:via-purple-800/30 dark:to-blue-800/30 mix-blend-multiply"></div>
          <div class="relative z-10 text-white text-center flex flex-col items-center justify-center p-4">
            <svg class="w-12 h-12 sm:w-16 sm:h-16 text-zinc-300 dark:text-zinc-500 mb-2 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-lg sm:text-xl font-bold text-zinc-200 dark:text-zinc-400 drop-shadow-md">360° Product View</p>
            <p class="text-sm sm:text-base text-zinc-400 dark:text-zinc-600 mt-1">Drag to explore</p>
          </div>
          <div class="absolute bottom-3 right-3 flex space-x-2">
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
            </button>
            <button class="p-2 bg-zinc-600/70 hover:bg-zinc-500/70 rounded-full text-white backdrop-blur-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-400">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Right Section: Product Details -->
        <div class="w-full md:w-1/3 flex flex-col justify-between text-zinc-300 dark:text-zinc-400">
          <div>
            <h2 class="text-xl sm:text-2xl lg:text-3xl font-extrabold mb-2 uppercase tracking-wide text-transparent bg-clip-text
                       bg-gradient-to-r from-red-400 via-yellow-400 to-green-400
                       dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                       drop-shadow-lg">
              Investment Portfolio
            </h2>
            <p class="text-sm sm:text-base mb-4 text-zinc-400 dark:text-zinc-500 leading-relaxed">
              Explore the intricate details of your diversified financial assets.
              This interactive view provides a dynamic perspective.
            </p>
          </div>

          <div class="space-y-3 mt-4 text-sm sm:text-base font-mono">
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Current Value:</span>
              <span class="text-green-400 dark:text-lime-400 font-bold tracking-wider">$1,234,567.89</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Daily Change:</span>
              <span class="text-emerald-400 dark:text-teal-400">+1.23%</span>
            </p>
            <p class="flex justify-between items-center">
              <span class="font-semibold text-zinc-200 dark:text-zinc-300">Growth Rate (YTD):</span>
              <span class="text-blue-400 dark:text-sky-400">+18.75%</span>
            </p>
          </div>

          <button class="mt-6 w-full py-3 px-4 rounded-lg font-bold uppercase tracking-wider shadow-lg transform active:scale-95 transition-transform duration-200
                         text-zinc-900 dark:text-white
                         bg-gradient-to-r from-cyan-400 via-lightBlue-500 to-indigo-600
                         hover:from-cyan-500 hover:via-lightBlue-600 hover:to-indigo-700
                         dark:from-purple-500 dark:via-pink-500 dark:to-orange-500
                         dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-orange-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 dark:focus:ring-pink-400
                         border border-zinc-700 dark:border-zinc-800">
            View Full Report
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Checkout Form Component

A responsive checkout form component designed with a dark mode UI and jewel-toned color scheme, suitable for entertainment/media platforms. Includes payment details and summary sections.

Open Preview

                <div class="min-h-screen bg-gray-900 text-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-extrabold tracking-tight text-white dark:text-white sm:text-4xl mb-8 text-center">
      Complete Your Purchase
    </h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Payment Details Section -->
      <div class="bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8">
        <h2 class="text-2xl font-bold text-emerald-400 dark:text-emerald-400 mb-6">
          Payment Information
        </h2>

        <form class="space-y-6">
          <div>
            <label for="card-number" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Card Number</label>
            <input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label for="expiration-date" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Expiration Date</label>
              <input type="text" id="expiration-date" name="expiration-date" placeholder="MM/YY" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
            </div>
            <div>
              <label for="cvc" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">CVC</label>
              <input type="text" id="cvc" name="cvc" placeholder="123" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
            </div>
          </div>

          <div>
            <label for="cardholder-name" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Cardholder Name</label>
            <input type="text" id="cardholder-name" name="cardholder-name" placeholder="John Doe" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
          </div>

          <div>
            <label for="country" class="block text-sm font-medium text-gray-300 dark:text-gray-300 mb-2">Country</label>
            <select id="country" name="country" class="block w-full rounded-md border-gray-700 dark:border-gray-700 bg-gray-700 dark:bg-gray-700 text-white dark:text-white focus:border-emerald-500 focus:ring-emerald-500 sm:text-sm p-3">
              <option>United States</option>
              <option>Canada</option>
              <option>United Kingdom</option>
              <option>Germany</option>
              <option>Australia</option>
            </select>
          </div>
        </form>
      </div>

      <!-- Order Summary Section -->
      <div class="bg-gray-800 dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8">
        <h2 class="text-2xl font-bold text-sapphire-400 dark:text-sapphire-400 mb-6">
          Order Summary
        </h2>

        <div class="space-y-4 mb-6">
          <div class="flex justify-between items-center text-gray-300 dark:text-gray-300">
            <span class="font-medium">Premium Subscription (Monthly)</span>
            <span class="font-semibold">$12.99</span>
          </div>
          <div class="flex justify-between items-center text-gray-300 dark:text-gray-300">
            <span class="font-medium">Exclusive Content Add-on</span>
            <span class="font-semibold">$5.00</span>
          </div>
          <div class="border-t border-gray-700 dark:border-gray-700 pt-4 flex justify-between items-center text-white dark:text-white text-lg">
            <span class="font-bold">Total Due</span>
            <span class="font-extrabold text-ruby-400 dark:text-ruby-400">$17.99</span>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold text-gray-300 dark:text-gray-300 mb-3">Billing Address</h3>
          <address class="not-italic text-gray-400 dark:text-gray-400 space-y-1">
            <p>123 Stream St</p>
            <p>Entertainment City, 90210</p>
            <p>CA, USA</p>
          </address>
        </div>

        <button type="submit" class="w-full flex items-center justify-center p-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-ruby-600 hover:bg-ruby-700 dark:bg-ruby-600 dark:hover:bg-ruby-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ruby-500 dark:focus:ring-ruby-500">
          Confirm Payment
        </button>

        <p class="mt-4 text-center text-sm text-gray-400 dark:text-gray-400">
          By clicking 'Confirm Payment', you agree to our <a href="#" class="text-emerald-400 hover:underline">Terms of Service</a> and <a href="#" class="text-emerald-400 hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom color definitions for jewel tones */
  .text-emerald-400 {
    color: #34d399; /* Tailwind emerald-400 */
  }
  .text-sapphire-400 {
    color: #60a5fa; /* Tailwind blue-400 as sapphire */
  }
  .text-ruby-400 {
    color: #f87171; /* Tailwind red-400 as ruby */
  }
  .bg-ruby-600 {
    background-color: #dc2626; /* Tailwind red-600 */
  }
  .hover:bg-ruby-700:hover {
    background-color: #b91c1c; /* Tailwind red-700 */
  }
  .focus\:ring-ruby-500:focus {
    --tw-ring-color: #ef4444; /* Tailwind red-500 */
  }
</style>

Corporate_Portfolio_Showcase_Simple

A simple, clean, and trustworthy portfolio showcase component designed for professional corporate environments, using a triadic color scheme and supporting dark mode.

Open Preview

                <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 max-w-6xl">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-white mb-4">
        Our Latest Innovations
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
        Discover the impactful projects we've delivered, showcasing our expertise and commitment to excellence.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1015/600/400" alt="Project Image 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Enterprise Solution X
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            A robust cloud-based platform designed to streamline operations for large enterprises.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/600/400" alt="Project Image 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Dynamic Data Dashboard
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intuitive analytics dashboard providing real-time insights for decision-makers.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white font-medium rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1020/600/400" alt="Project Image 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            AI-Powered Customer Support
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intelligent chatbot and knowledge base for enhanced customer experiences.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-fuchsia-600 text-white font-medium rounded-md hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

A simple, responsive sidebar navigation component with an organic, nature-inspired design using sepia/brown tones, suitable for healthcare and medical applications. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-stone-950 font-sans">

  <!-- Mobile Toggle (hidden on desktop) -->
  <input type="checkbox" id="menu-toggle" class="hidden peer/menu" />
  <label for="menu-toggle" class="absolute top-4 left-4 z-40 p-2 rounded-lg bg-stone-300 text-stone-700 md:hidden cursor-pointer dark:bg-stone-700 dark:text-stone-300 transition-colors duration-300">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
  </label>

  <!-- Sidebar -->
  <aside class="fixed top-0 left-0 h-full w-64 p-4 z-30 transform -translate-x-full md:relative md:translate-x-0 transition-transform duration-500 ease-in-out bg-stone-200 dark:bg-stone-800 border-r border-stone-300 dark:border-stone-700 peer-checked/menu:translate-x-0 overflow-y-auto shadow-lg md:rounded-tr-lg md:rounded-br-lg md:shadow-xl">
    <div class="flex items-center mb-8 justify-center lg:justify-start">
      <div class="w-12 h-12 rounded-full bg-amber-600 flex items-center justify-center text-white text-2xl font-bold mr-3 shadow-md">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
      </div>
      <span class="text-2xl font-semibold text-stone-800 dark:text-stone-100 hidden lg:block">MedFlow</span>
    </div>

    <nav class="space-y-3">
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
        <span class="font-medium">Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3z"></path></svg>
        <span class="font-medium">Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 19c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7 19c-1.1 0-1.99.9-1.99 2S5.9 23 7 23s2-.9 2-2-.9-2-2-2zm8-14H7V3H5v2H3l.01 14H5c0 1.1.9 2 2 2s2-.9 2-2h6c1.1 0 2 .9 2 2s.9 2 2 2 2-.9 2-2h2v-4.5c0-.85-.34-1.66-.99-2.25L17 9V5h-2z"></path></svg>
        <span class="font-medium">Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 14v-2h-6V4h-2v8H5v2h6v6h2v-6h6z"></path></svg>
        <span class="font-medium">Procedures</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 17c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2s-2 .9-2 2v6c0 1.1.9 2 2 2zM18 10v1c0 2.21-1.79 4-4 4h-4c-2.21 0-4-1.79-4-4v-1h2v1c0 1.1.9 2 2 2h4c1.1 0 2-.9 2-2v-1h2V7h-2V5c0-1.1-.9-2-2-2s-2 .9-2 2v2H8V5c0-.55-.45-1-1-1s-1 .45-1 1v2H4V4c0-1.1-.9-2-2-2S0 3 0 4v9c0 3.31 2.69 6 6 6h2v-2h4v2h2v-2h2v2h2c3.31 0 6-2.69 6-6V7h-2v3h-2z"></path></svg>
        <span class="font-medium">Billing</span>
      </a>
      <div class="border-t border-stone-300 dark:border-stone-700 my-4"></div>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z"></path></svg>
        <span class="font-medium">Pharmacy</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
        <span class="font-medium">Information</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-stone-700 dark:text-stone-300 hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200 active:bg-amber-100 dark:active:bg-amber-900 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 group">
        <svg class="w-6 h-6 mr-3 text-amber-700 dark:text-amber-300 group-hover:text-amber-800 dark:group-hover:text-amber-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 12h-1V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v8H5c-1.66 0-3 1.34-3 3v2c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-2c0-1.66-1.34-3-3-3zm-3 0H8V4h8v8zm-2 5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg>
        <span class="font-medium">Settings</span>
      </a>
    </nav>

    <!-- User Profile or Logout -->
    <div class="mt-4 pt-4 border-t border-stone-300 dark:border-stone-700 flex items-center justify-center lg:justify-start">
      <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-500 dark:border-amber-400 object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="hidden lg:block">
        <p class="text-stone-800 dark:text-stone-100 font-semibold text-sm">Dr. John Doe</p>
        <p class="text-stone-600 dark:text-stone-400 text-xs">Physician</p>
      </div>
      <a href="#" class="ml-auto p-2 rounded-full text-stone-600 hover:bg-stone-300 dark:text-stone-400 dark:hover:bg-stone-700 transition-colors duration-200 hidden md:block" aria-label="Sign out"> 
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H5a3 3 0 01-3-3v-10a3 3 0 013-3h5a3 3 0 013 3v1"></path></svg>
      </a>
    </div>
  </aside>

  <!-- Main Content Area (for demonstration) -->
  <main class="flex-1 p-6 md:p-8 overflow-auto dark:text-stone-200">
    <h1 class="text-3xl font-semibold mb-6 text-stone-800 dark:text-stone-100">Welcome to Dashboard</h1>
    <p class="text-stone-700 dark:text-stone-300 mb-4">This is the main content area. You can place your application's primary content here. The sidebar is designed to provide seamless navigation.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Latest Patients</h2>
        <p class="text-stone-600 dark:text-stone-300">View recent patient registrations and updates.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Appointment Schedule</h2>
        <p class="text-stone-600 dark:text-stone-300">Manage today's and upcoming appointments.</p>
      </div>
      <div class="bg-stone-100 dark:bg-stone-700 p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Medical Records</h2>
        <p class="text-stone-600 dark:text-stone-300">Access and update patient medical histories.</p>
      </div>
    </div>
    <div class="mt-8">
      <img src="https://picsum.photos/800/400?grayscale&blur=2" alt="Organic medical illustration" class="rounded-lg shadow-lg w-full object-cover max-h-64">
    </div>
  </main>
</div>

Interactive Components Component

A minimalist, vibrant, and simple interactive component designed for entertainment and media platforms, featuring play/pause controls, a progress bar, and speaker volume control. Includes full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-emerald-50 to-cyan-50 dark:from-slate-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-6 sm:mb-8">
      <div class="aspect-video w-20 sm:w-24 md:w-28 flex-shrink-0 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
        <img src="https://picsum.photos/300/200?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="flex-grow min-w-0">
        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-50 truncate mb-1">
          Epic Soundtrack Loop
        </h3>
        <p class="text-sm sm:text-base text-cyan-600 dark:text-teal-400 truncate">
          Unknown Artist
        </p>
      </div>
    </div>

    <!-- Playback Controls -->
    <div class="flex justify-around items-center mb-6 sm:mb-8">
      <button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 10.293a1 1 0 010-1.414L10.586 6V7a1 1 0 011 1v4a1 1 0 01-1 1v1l-2.879-2.879a1 1 0 01-.11-.13V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-3 sm:p-4 rounded-full bg-cyan-500 dark:bg-cyan-600 text-white shadow-lg hover:bg-cyan-600 dark:hover:bg-cyan-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        <!-- Or use pause icon: -->
        <!-- <svg class="w-6 h-6 sm:w-7 sm:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> -->
      </button>
      <button class="p-2 sm:p-3 rounded-full bg-emerald-100 dark:bg-emerald-700 text-emerald-600 dark:text-white hover:bg-emerald-200 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 10.293a1 1 0 011.414 0l2.879 2.879A1 1 0 0116 13V7a1 1 0 01-1-1v-1l-2.879 2.879a1 1 0 01-.13.11V10.293zM10 18a8 8 0 100-16 8 8 0 000 16z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Progress Bar -->
    <div class="mb-6 sm:mb-8">
      <div class="h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mb-2 relative">
        <div class="h-full bg-cyan-500 dark:bg-cyan-400 w-1/3 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 33.33%;"></div>
        <div class="w-3 h-3 bg-cyan-700 dark:bg-cyan-300 rounded-full absolute top-1/2 -mt-1.5 left-1/3 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
      </div>
      <div class="flex justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400">
        <span>2:15</span>
        <span>6:40</span>
      </div>
    </div>

    <!-- Volume Control -->
    <div class="flex items-center space-x-3 text-gray-600 dark:text-gray-300">
      <svg class="w-5 h-5 sm:w-6 sm:h-6 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.293 7.293a1 1 0 011.414 0L17 8.586l1.293-1.293a1 1 0 111.414 1.414L18.414 10l1.293 1.293a1 1 0 01-1.414 1.414L17 11.414l-1.293 1.293a1 1 0 01-1.414-1.414L15.586 10l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      <div class="flex-grow h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full relative">
        <div class="h-full bg-emerald-500 dark:bg-emerald-400 w-3/4 rounded-full absolute top-0 left-0 transition-all duration-300 ease-out" style="width: 75%;"></div>
        <div class="w-3 h-3 bg-emerald-700 dark:bg-emerald-300 rounded-full absolute top-1/2 -mt-1.5 left-3/4 -ml-1.5 shadow-md transform -translate-x-1/2 transition-all duration-300 ease-out"></div>
      </div>
    </div>
  </div>
</div>

Video Player Component

A complex, high-contrast video player component with Material Design aesthetics, suitable for travel/tourism websites. Features responsive design, dark mode support, and interactive elements.

Open Preview

                <div class="p-4 md:p-8 lg:p-12 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl overflow-hidden rounded-2xl shadow-2xl dark:shadow-none transition-all duration-300 transform bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:shadow-3xl dark:hover:shadow-none">
    <div class="md:flex">
      <!-- Video Player Section -->
      <div class="flex-1 relative aspect-video bg-black rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
        <div class="absolute inset-0 flex items-center justify-center">
          <button class="p-4 rounded-full bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-30 backdrop-blur-sm text-white hover:scale-110 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-blue-600 focus:ring-opacity-50">
            <svg class="w-16 h-16" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>

        <!-- Controls Overlay Placeholder -->
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent opacity-90 text-white flex flex-col space-y-2">
          <div class="flex items-center space-x-2">
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 5v14l11-7z"/>
              </svg>
            </button>
            <div class="flex-1 h-2 bg-gray-700 rounded-full">
              <div class="h-full w-2/3 bg-blue-500 rounded-full"></div>
            </div>
            <span class="text-sm text-gray-300">0:45 / 2:30</span>
            <button class="text-white hover:text-blue-400 focus:outline-none">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 5L19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
            <button class="text-white hover:text-blue-400 focus:outline-none hidden sm:block">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4v16m8-8H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Details and Sidebar Section -->
      <div class="w-full md:w-2/5 p-6 md:p-8 flex flex-col justify-between">
        <div>
          <h2 class="text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white mb-3 leading-tight">
            Exploring the Hidden Gems of Patagonia
          </h2>
          <p class="text-sm text-blue-600 dark:text-blue-400 font-medium mb-4 uppercase tracking-wider">
            Travel Documentary • Adventure
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base mb-6 leading-relaxed">
            Join us on an unforgettable journey through the breathtaking landscapes of Patagonia. Discover majestic glaciers, pristine lakes, and towering peaks in this stunning adventure.
          </p>
          
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Key Highlights:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
              <li>Perito Moreno Glacier's stunning ice formations</li>
              <li>Trekking through Torres del Paine National Park</li>
              <li>Wildlife spotting: guanacos, condors, and pumas</li>
              <li>Kayaking in turquoise glacial waters</li>
            </ul>
          </div>
        </div>

        <div class="pt-4 border-t border-gray-200 dark:border-gray-700 mt-auto">
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Traveller User" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
            <div>
              <p class="font-semibold text-gray-900 dark:text-white">Filmed by: John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Adventure Vlogger</p>
            </div>
          </div>
          <a href="#" class="inline-block w-full py-3 px-6 rounded-lg text-center font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 shadow-lg">
            Book Your Patagonia Tour Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Follow Button Component - Monospace/Developer Style

A complex, interactive follow button component designed for news/journalism websites, featuring a monospace/developer aesthetic with jewel-tone colors and full responsiveness, including dark mode support.

Open Preview

                <div class="font-mono antialiased p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-md mx-auto bg-white dark:bg-zinc-900 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800">
    <div class="flex items-center p-4 sm:p-6 border-b border-gray-200 dark:border-zinc-800">
      <div class="flex-shrink-0">
        <img class="h-16 w-16 sm:h-20 sm:w-20 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-600 ring-2 ring-emerald-300 dark:ring-emerald-800" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Developer Profile Picture">
      </div>
      <div class="ml-4 flex-grow">
        <h2 class="text-xl sm:text-2xl font-bold dark:text-emerald-400">@DevJournalist_AI</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 hidden sm:block">Code Editor & Story Teller</p>
        <div class="flex items-center space-x-2 mt-2">
          <span class="px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 text-xs font-semibold rounded-full">Verified</span>
          <span class="px-2 py-1 bg-violet-100 dark:bg-violet-900 text-violet-700 dark:text-violet-300 text-xs font-semibold rounded-full">News</span>
        </div>
      </div>
      <div class="flex flex-col items-end">
        <button class="follow-button px-5 py-2 sm:px-6 sm:py-2.5 rounded-full text-white font-semibold transition-all duration-300 flex items-center justify-center
          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600
          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800
          data-[followed='true']:bg-gray-300 data-[followed='true']:hover:bg-gray-400 data-[followed='true']:dark:bg-zinc-700 data-[followed='true']:dark:hover:bg-zinc-600
          data-[followed='true']:text-gray-800 data-[followed='true']:dark:text-gray-200
          data-[followed='true']:focus:ring-gray-200 data-[followed='true']:dark:focus:ring-zinc-600"
          onclick="this.dataset.followed = (this.dataset.followed === 'true' ? 'false' : 'true');
                   this.innerHTML = (this.dataset.followed === 'true' ? '&check; Followed' : '+ Follow');"
          data-followed="false">
          + Follow
        </button>
        <span class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-right" id="follower-count">12.5k Followers</span>
      </div>
    </div>
    <div class="p-4 sm:p-6 text-sm text-gray-700 dark:text-gray-300">
      <p class="mb-2"><span class="text-emerald-500 dark:text-emerald-400">// Latest Commit:</span> Unpacking the future of AI in journalism. Stay updated on cutting-edge tech and ethical reporting.</p>
      <p class="mb-2"><span class="text-violet-500 dark:text-violet-400">// Repository Status:</span> Constantly fetching new insights from the global newsfeed. Expect bug fixes and feature updates on your understanding of complex issues.</p>
      <p class="text-ruby-500 dark:text-ruby-400"><span class="text-red-500 dark:text-red-400">// System Log:</span> Ping us for collabs or data-driven story discussions. Our DMs are open for secure connections.</p>
    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-zinc-800 flex flex-wrap gap-2 text-xs">
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#TechJournalism</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#DataScience</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#AIethics</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#FutureOfNews</span>
    </div>
  </div>
</div>

Playful Dashboard Navigation

A simple, playful, and responsive dashboard navigation component using jewel tones with rounded elements and full dark mode support.

Open Preview

                <nav class="bg-emerald-400 dark:bg-emerald-800 p-4 rounded-b-3xl shadow-lg">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <a href="#" class="text-white text-2xl font-bold tracking-tight mb-4 md:mb-0 dark:text-emerald-100">Dashboard Fun</a>
    <button class="md:hidden text-white dark:text-emerald-100 focus:outline-none" aria-label="Toggle navigation">
      <svg class="w-8 h-8" 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 6h16M4 12h16m-4 6h4"></path>
      </svg>
    </button>
    <ul class="hidden md:flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg">
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Overview</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Analytics</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Reports</span>
        </a>
      </li>
      <li>
        <a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
          <span class="block md:inline">Settings</span>
        </a>
      </li>
    </ul>
    <!-- Mobile menu (hidden by default) - A JavaScript toggle would be needed for this -->
    <ul class="md:hidden flex-col items-center mt-4 space-y-3 w-full text-lg" id="mobile-menu-items">
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Overview
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Analytics
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Reports
        </a>
      </li>
      <li>
        <a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
          Settings
        </a>
      </li>
    </ul>
  </div>
</nav>

1 ... 64 65 66 67 68 ... 335

Search Components

Categories

All Components