Search Components

All Components

Browse all available Tailwind CSS components

Neumorphic User Profiles Component

A complex, responsive user profiles component with a neumorphic design style and ocean/blue color scheme, suitable for business/corporate websites. Includes dark mode support.

Open Preview

                <div class="bg-blue-100 dark:bg-gray-900 min-h-screen py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-blue-200 text-center mb-12 sm:text-5xl lg:text-6xl drop-shadow-lg">
      Our Esteemed Team
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
      <!-- Profile Card 1 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile of Jane Doe">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Jane Doe
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">CEO, Founder</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Innovating the future, one elegant solution at a time."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" 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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Profile of Mark Johnson">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Mark Johnson
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Lead Developer</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Crafting robust and scalable software solutions with passion."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" 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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile of Sarah Lee">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          Sarah Lee
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Head of Marketing</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Driving brand growth with creative strategies and data-driven insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" 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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="relative p-8 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-custom-light dark:shadow-custom-dark transition-all duration-300 transform hover:-translate-y-2 hover:shadow-custom-hover-light dark:hover:shadow-custom-hover-dark group">
        <div class="relative w-32 h-32 mx-auto rounded-full overflow-hidden bg-blue-200 dark:bg-gray-700 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark mb-6 flex items-center justify-center">
          <img class="w-28 h-28 rounded-full object-cover shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Profile of David Chen">
          <div class="absolute bottom-0 right-0 w-8 h-8 bg-red-500 rounded-full border-4 border-blue-100 dark:border-gray-800 shadow-neumorphic-circle-light dark:shadow-neumorphic-circle-dark transition-transform duration-300 group-hover:scale-110"></div>
        </div>
        <h3 class="text-2xl font-semibold text-blue-900 dark:text-blue-100 text-center mb-2">
          David Chen
        </h3>
        <p class="text-blue-700 dark:text-blue-300 text-center mb-6 font-medium text-lg">Financial Advisor</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="LinkedIn">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Twitter">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.791-1.574 2.162-2.722-.951.564-2.005.974-3.127 1.195-.89-.948-2.172-1.547-3.593-1.547-2.71 0-4.911 2.201-4.911 4.911 0 .385.044.757.127 1.111-4.08-2.059-7.722-4.33-10.155-8.146-.424.722-.666 1.564-.666 2.47 0 1.701.868 3.21 2.188 4.097-.807-.025-1.569-.247-2.229-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.17-1.296.17-.318 0-.626-.031-.925-.088.629 1.956 2.449 3.383 4.604 3.423-1.684 1.32-3.804 2.107-6.102 2.107-.398 0-.79-.023-1.175-.069 2.18 1.39 4.768 2.207 7.557 2.207 9.054 0 13.999-7.49 13.999-13.989 0-.21 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548z"/></svg>
          </a>
          <a href="#" class="w-10 h-10 rounded-full flex items-center justify-center text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-gray-800 shadow-small-neumorphic-light dark:shadow-small-neumorphic-dark hover:shadow-small-neumorphic-inset-light dark:hover:shadow-small-neumorphic-inset-dark transition-all duration-300 group-hover:scale-110" aria-label="Email">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12.71c.21.16.42.29.65.41.23.12.48.23.75.33.27.1.57.18.88.24.31.06.65.09 1.01.09.38 0 .73-.03 1.06-.09.33-.06.64-.14.93-.24.29-.1.56-.21.82-.33.26-.12.49-.25.71-.41 0 0 7.82-6.27 8.02-6.42.2-.15.28-.41.28-.68 0-.4-.26-.74-.69-.74-1.93 0-6.13 4.92-7.81 6.27-.2-.14-.42-.28-.64-.42-.23-.14-.47-.27-.72-.4-.25-.13-.5-.25-.76-.37-.26-.12-.53-.23-.8-.34-.27-.11-.53-.21-.8-.31-.27-.1-.53-.19-.8-.28-.27-.09-.53-.17-.8-.25-.27-.08-.53-.15-.8-.22-.27-.07-.53-.12-.8-.17-.27-.05-.53-.08-.8-.11-.27-.03-.53-.04-.8-.04-.27 0-.53.01-.8.04-.27.03-.53.06-.8.11-.27.05-.53.1-.8.17-.27.07-.53.14-.8.22-.27.08-.53.17-.8.25-.27.09-.53.18-.8.28-.27.1-.53.21-.8.31-.26.12-.53.23-.8.34-.25.12-.49.25-.76.37-.25.13-.49.26-.72.4-.22.14-.44.28-.64.42-1.68-1.35-5.88-6.27-7.81-6.27-.43 0-.69.34-.69.74 0 .27.08.53.28.68.2.16 8.02 6.42 8.02 6.42z"/></svg>
          </a>
        </div>
        <p class="text-blue-800 dark:text-blue-200 text-sm leading-relaxed mb-6 italic text-center">
          "Guiding clients towards financial success with strategic insights."
        </p>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 p-3 rounded-full bg-blue-500 dark:bg-blue-600 shadow-neumorphic-thumb-light dark:shadow-neumorphic-thumb-dark transition-transform duration-300 group-hover:scale-125">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" 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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
        </div>
      </div>

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

<style>
  /* Custom CSS for Neumorphism Shadows */
  .shadow-custom-light {
    box-shadow: 8px 8px 16px #94c8e7, -8px -8px 16px #d4efff;
  }
  .dark .shadow-custom-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #3a4b6b;
  }
  .shadow-custom-hover-light {
    box-shadow: inset 6px 6px 12px #94c8e7, inset -6px -6px 12px #d4efff;
  }
  .dark .shadow-custom-hover-dark {
    box-shadow: inset 6px 6px 12px #1a202c, inset -6px -6px 12px #3a4b6b;
  }

  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #94c8e7, inset -5px -5px 10px #d4efff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #3a4b6b;
  }

  .shadow-inner-neumorphic-light {
    box-shadow: inset 3px 3px 6px #94c8e7, inset -3px -3px 6px #d4efff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 3px 3px 6px #1a202c, inset -3px -3px 6px #3a4b6b;
  }

  .shadow-small-neumorphic-light {
    box-shadow: 3px 3px 6px #94c8e7, -3px -3px 6px #d4efff;
  }
  .dark .shadow-small-neumorphic-dark {
    box-shadow: 3px 3px 6px #1a202c, -3px -3px 6px #3a4b6b;
  }
  .shadow-small-neumorphic-inset-light {
    box-shadow: inset 2px 2px 4px #94c8e7, inset -2px -2px 4px #d4efff;
  }
  .dark .shadow-small-neumorphic-inset-dark {
    box-shadow: inset 2px 2px 4px #1a202c, inset -2px -2px 4px #3a4b6b;
  }

  .shadow-neumorphic-circle-light {
    box-shadow: 2px 2px 5px #94c8e7, -2px -2px 5px #d4efff;
  }
  .dark .shadow-neumorphic-circle-dark {
    box-shadow: 2px 2px 5px #1a202c, -2px -2px 5px #3a4b6b;
  }

  .shadow-neumorphic-thumb-light {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.7);
  }
  .dark .shadow-neumorphic-thumb-dark {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(60, 60, 60, 0.7);
  }
<\/style>

Swiss_International_Navigation_Fashion_Beauty

A complex, responsive navigation component for fashion/beauty brands, adhering to Swiss/International Typography design principles with a corporate blue color scheme. Includes dark mode support and multiple interactive elements.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation Component</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            'corporate-blue-50': '#EBF2FA',
            'corporate-blue-100': '#D4E2F1',
            'corporate-blue-200': '#A6C8E6',
            'corporate-blue-300': '#7AB0DB',
            'corporate-blue-400': '#4D96D0',
            'corporate-blue-500': '#217CC5',
            'corporate-blue-600': '#1C69A1',
            'corporate-blue-700': '#175680',
            'corporate-blue-800': '#124360',
            'corporate-blue-900': '#0D3040',
          },
        },
      },
    }
  </script>
  <style>
    /* Basic styles for demonstration, normally set by Tailwind config */
    body {
      font-family: 'Helvetica Neue', 'Arial', sans-serif;
    }
    /* Custom hover effect for mega menu */
    .group:hover .group-hover\\:block {
      display: block;
    }
  </style>
</head>
<body class="bg-neutral-50 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 min-h-screen">

  <nav class="bg-white dark:bg-neutral-800 shadow-md py-4 transition-colors duration-300 w-full z-50 relative">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <!-- Logo -->
      <a href="#" class="text-3xl font-bold tracking-tight text-corporate-blue-700 dark:text-corporate-blue-300 uppercase">
        FASHION<span class="text-corporate-blue-500 dark:text-corporate-blue-500">LAB</span>
      </a>

      <!-- Desktop Menu -->
      <ul class="hidden md:flex space-x-8 lg:space-x-12 text-lg font-medium tracking-tight h-16 items-center">
        <li class="group relative h-full flex items-center">
          <a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">
            Shop
          </a>
          <div class="absolute hidden group-hover:block w-full top-full left-0 mt-0 py-6 bg-white dark:bg-neutral-800 shadow-xl rounded-b-lg border-t border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
            <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 px-6">
              <div class="">
                <h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Women's Apparel</h3>
                <ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
                  <li><a href="#" class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Dresses</a></li>
                  <li><a href="#" class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Tops & Blouses</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Skirts & Pants</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Outerwear</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Activewear</a></li>
                  <li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">View All Womens</a></li>
                </ul>
              </div>
              <div class="">
                <h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Men's Collection</h3>
                <ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Shirts</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Pants & Shorts</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Jackets</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Sportswear</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Suits</a></li>
                  <li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">View All Mens</a></li>
                </ul>
              </div>
              <div class="">
                <h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300">Beauty & Wellness</h3>
                <ul class="space-y-2 text-neutral-600 dark:text-neutral-300">
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Skincare</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Makeup</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Fragrances</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Haircare</a></li>
                  <li><a class="hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Body & Bath</a></li>
                  <li><a class="font-bold text-corporate-blue-600 dark:text-corporate-blue-400 hover:underline transition">Discover All Beauty</a></li>
                </ul>
              </div>
              <div class="">
                <h3 class="font-bold text-lg mb-4 text-corporate-blue-700 dark:text-corporate-blue-300 hidden lg:block">Featured Styles</h3>
                <a href="#" class="block overflow-hidden rounded-lg shadow-lg relative lg:h-48 h-32">
                  <img src="https://picsum.photos/300/200?random=1" alt="Placeholder image for new arrivals" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
                    <span class="text-white text-xl font-bold tracking-tight">New Arrivals</span>
                  </div>
                </a>
                <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">Explore the latest trends.</p>
              </div>
            </div>
          </div>
        </li>
        <li class="group relative h-full flex items-center">
          <a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Categories</a>
        </li>
        <li class="group relative h-full flex items-center">
          <a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Brands</a>
          <div class="absolute hidden group-hover:block w-48 top-full left-0 mt-0 py-3 bg-white dark:bg-neutral-800 shadow-xl rounded-b-lg border-t border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
            <ul class="text-sm space-y-2 text-neutral-600 dark:text-neutral-300 px-4">
              <li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand A</a></li>
              <li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand B</a></li>
              <li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Brand C</a></li>
              <li><a href="#" class="block hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">Sustainable Brands</a></li>
              <li><a href="#" class="block text-corporate-blue-600 dark:text-corporate-blue-400 font-bold hover:underline transition">View All Brands</a></li>
            </ul>
          </div>
        </li>
        <li class="group relative h-full flex items-center transition duration-300">
          <a href="#" class="text-neutral-700 dark:text-neutral-200 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition duration-300 py-4 border-b-2 border-transparent group-hover:border-corporate-blue-500 dark:group-hover:border-corporate-blue-400">Campaigns</a>
        </li>
      </ul>

      <!-- Icons / Utilities -->
      <div class="flex items-center space-x-5 lg:space-x-6">
        <button aria-label="Search" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </button>

        <a href="#" aria-label="Favorites" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition relative">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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" />
          </svg>
          <span class="absolute -top-1 -right-1 bg-corporate-blue-500 dark:bg-corporate-blue-400 text-white text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">3</span>
        </a>

        <a href="#" aria-label="Shopping Cart" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition relative">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          <span class="absolute -top-1 -right-1 bg-corporate-blue-500 dark:bg-corporate-blue-400 text-white text-xs font-bold rounded-full h-4 w-4 flex items-center justify-center">7</span>
        </a>

        <div class="group relative hidden md:block">
          <button aria-label="User account" class="flex items-center space-x-2 text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-corporate-blue-300 dark:border-corporate-blue-600">
            <span class="hidden lg:block text-base font-medium">My Account</span>
          </button>
          <div class="absolute hidden group-hover:block w-48 top-full right-0 mt-2 py-2 bg-white dark:bg-neutral-800 shadow-xl rounded-lg border border-solid border-corporate-blue-100 dark:border-neutral-700 transition duration-300 ease-in-out transform origin-top ">
            <a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Orders</a>
            <a href="#" class="block px-4 py-2 text-sm text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Addresses</a>
            <div class="border-t border-solid border-corporate-blue-100 dark:border-neutral-700 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 transition">Sign Out</a>
          </div>
        </div>

        <!-- Dark mode toggle -->
        <button id="theme-toggle" aria-label="Toggle dark mode" class="text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
          <svg id="theme-toggle-light-icon" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.79l-.707-.707M4.372 19.372l-.707-.707M19.071 4.929l-.707.707M4.929 19.071l-.707.707M18 12a6 6 0 11-12 0 6 6 0 0112 0z" />
          </svg>
          <svg id="theme-toggle-dark-icon" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>

        <!-- Mobile Menu Button -->
        <button id="mobile-menu-button" aria-label="Open mobile menu" class="md:hidden text-neutral-600 dark:text-neutral-300 hover:text-corporate-blue-600 dark:hover:text-corporate-blue-400 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile Menu (hidden by default) -->
    <div id="mobile-menu" class="hidden md:hidden absolute top-full left-0 w-full bg-white dark:bg-neutral-800 shadow-lg pb-6 transform -translate-y-full opacity-0 transition-all duration-300 ease-in-out">
      <div class="container mx-auto px-4 py-4 space-y-4 text-base font-medium">
        <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Shop</a>
        <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Categories</a>
        <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Brands</a>
        <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Campaigns</a>
        <div class="border-t border-solid border-corporate-blue-100 dark:border-neutral-700 mt-4 pt-4 space-y-3">
          <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-7 h-7 rounded-full border border-corporate-blue-300 dark:border-corporate-blue-600">
            <span>My Account</span>
          </a>
          <a href="#" class="block px-4 py-2 text-neutral-700 dark:text-neutral-200 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Favorites</a>
          <a href="#" class="block px-4 py-2 text-red-600 dark:text-red-400 hover:bg-corporate-blue-50 dark:hover:bg-neutral-700 rounded-md transition">Sign Out</a>
        </div>
      </div>
    </div>
  </nav>

  <div class="h-96 flex items-center justify-center bg-corporate-blue-50 dark:bg-corporate-blue-900 transition-colors duration-300">
    <h1 class="text-4xl lg:text-6xl font-extrabold text-corporate-blue-700 dark:text-corporate-blue-200 text-center tracking-tighter">Explore Our Latest Collections</h1>
  </div>

  <script>
    // Mobile menu toggle logic
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
      const isMenuOpen = mobileMenu.classList.contains('translate-y-0');
      if (isMenuOpen) {
        mobileMenu.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');
        mobileMenu.classList.add('-translate-y-full', 'opacity-0', 'pointer-events-none');
      } else {
        mobileMenu.classList.remove('-translate-y-full', 'opacity-0', 'pointer-events-none');
        mobileMenu.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');
      }
      mobileMenu.classList.toggle('hidden'); // Toggles hidden class after transition
    });

    // Dark mode toggle logic
    const themeToggleBtn = document.getElementById('theme-toggle');
    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');

    // On initial load, check for dark mode preference
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
      themeToggleDarkIcon.classList.remove('hidden');
      themeToggleLightIcon.classList.add('hidden');
    } else {
      document.documentElement.classList.remove('dark');
      themeToggleLightIcon.classList.remove('hidden');
      themeToggleDarkIcon.classList.add('hidden');
    }

    themeToggleBtn.addEventListener('click', function() {
      // Toggle icons
      themeToggleLightIcon.classList.toggle('hidden');
      themeToggleDarkIcon.classList.toggle('hidden');

      // If set via localStorage previously
      if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
          document.documentElement.classList.add('dark');
          localStorage.setItem('color-theme', 'dark');
        } else {
          document.documentElement.classList.remove('dark');
          localStorage.setItem('color-theme', 'light');
        }
      } else { // If not set via localStorage previously
        if (document.documentElement.classList.contains('dark')) {
          document.documentElement.classList.remove('dark');
          localStorage.setItem('color-theme', 'light');
        } else {
          document.documentElement.classList.add('dark');
          localStorage.setItem('color-theme', 'dark');
        }
      }
    });
  </script>
</body>
</html>

Art Deco Tag Cloud Component

A responsive tag cloud component designed with an Art Deco aesthetic, featuring geometric patterns and luxurious blue tones, suitable for social media interfaces. Includes dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 rounded-3xl shadow-xl overflow-hidden relative p-6 sm:p-10 border-4 border-blue-500 dark:border-blue-700 transform transition-all duration-300 hover:scale-[1.01]">
    <!-- Art Deco Background Pattern -->
    <div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none overflow-hidden">
      <svg class="absolute w-[150%] h-[150%] left-[-25%] top-[-25%]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M0 0 L5 0 L5 5 L0 5 Z M5 5 L10 5 L10 10 L5 10 Z" fill="rgba(0,0,0,0.1)"/>
            <path d="M5 0 L10 0 L10 5 L5 5 Z M0 5 L5 5 L5 10 L0 10 Z" fill="rgba(0,0,0,0.05)"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
      </svg>
      <div class="absolute inset-0 bg-gradient-to-t from-transparent to-white dark:to-transparent opacity-10"></div>
    </div>

    <div class="relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-blue-900 dark:text-blue-100 mb-6 sm:mb-8 tracking-wider uppercase drop-shadow-md">
        <span class="block">Explore Topics</span>
        <span class="inline-block bg-blue-700 dark:bg-blue-300 h-1 w-20 rounded-full my-2 sm:my-3"></span>
      </h2>

      <div class="flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
        <!-- Individual Tags -->
        <a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-300 dark:border-blue-700
          hover:bg-blue-200 dark:hover:bg-blue-700
          hover:text-blue-900 dark:hover:text-white
          font-semibold text-sm sm:text-base
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Tech
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-400 dark:border-blue-600
          hover:bg-blue-300 dark:hover:bg-blue-600
          hover:text-blue-900 dark:hover:text-white
          font-bold text-base sm:text-lg
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Design
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-300 dark:border-blue-700
          hover:bg-blue-200 dark:hover:bg-blue-700
          hover:text-blue-900 dark:hover:text-white
          font-semibold text-sm sm:text-base
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Coding
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-200 dark:border-blue-800
          hover:bg-blue-100 dark:hover:bg-blue-850
          hover:text-blue-900 dark:hover:text-white
          font-medium text-xs sm:text-sm
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #WebDev
          <svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-300 dark:bg-blue-600 text-blue-900 dark:text-white px-5 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-500 dark:border-blue-500
          hover:bg-blue-400 dark:hover:bg-blue-500
          hover:text-blue-950 dark:hover:text-white
          font-extrabold text-lg sm:text-xl
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #SocialMedia
          <svg class="ml-2 w-5 h-5 text-blue-700 dark:text-blue-300 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-300 dark:border-blue-700
          hover:bg-blue-200 dark:hover:bg-blue-700
          hover:text-blue-900 dark:hover:text-white
          font-semibold text-sm sm:text-base
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Trends
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-200 dark:border-blue-800
          hover:bg-blue-100 dark:hover:bg-blue-850
          hover:text-blue-900 dark:hover:text-white
          font-medium text-xs sm:text-sm
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Community
          <svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-300 dark:border-blue-700
          hover:bg-blue-200 dark:hover:bg-blue-700
          hover:text-blue-900 dark:hover:text-white
          font-semibold text-sm sm:text-base
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Networking
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>

        <a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
          border-2 border-blue-400 dark:border-blue-600
          hover:bg-blue-300 dark:hover:bg-blue-600
          hover:text-blue-900 dark:hover:text-white
          font-bold text-base sm:text-lg
          relative overflow-hidden
          before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          ">
          #Digital
          <svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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 5l7 7-7 7"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Bounce Animation (can be in a <style> tag or utility class if possible) -->
<style>
  @keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  .group-hover\:animate-bounceX {
    animation: bounceX 0.6s ease-in-out infinite;
  }

  /* Dark mode pattern adjustment if using external CSS, otherwise Tailwind's dark: prefix handles colors */
  /* If you want the SVG pattern to change opacity specifically for dark mode, this would be the place */
  /* or use inline style for a more dynamic change with JS if needed, but per requirements, stick to CSS */
</style>

3D_Candy_Finance_Navigation

A simple, responsive navigation component for finance/banking applications, featuring a candy/sweet color scheme and subtle 3D design elements, with dark mode support.

Open Preview

                <nav class="bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300 dark:from-purple-900 dark:via-indigo-900 dark:to-gray-900 shadow-lg relative z-10 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-pink-300 mr-2 drop-shadow-md" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span class="text-white dark:text-white text-2xl font-extrabold tracking-tight drop-shadow-md">CandyBank</span>
        </a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Home
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Accounts
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Services
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Contact
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="bg-pink-400 dark:bg-indigo-700 inline-flex items-center justify-center p-2 rounded-md text-white dark:text-gray-300 hover:text-white hover:bg-pink-500 dark:hower:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-pink-300 drop-shadow-md" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!--
            Heroicon name: outline/menu
            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!--
            Heroicon name: outline/x
            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 bg-pink-400 dark:bg-purple-700 hover:bg-pink-500 hover:text-white dark:hover:bg-purple-800 transition duration-300 ease-in-out transform hover:scale-105">
        Home
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Accounts
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Services
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Contact
      </a>
    </div>
  </div>
</nav>

Skeuomorphic_Autumn_Skip_to_Content_Link

A simple, skeuomorphic 'Skip to Content' link component designed with an autumn color scheme, suitable for educational platforms, providing accessibility and responsiveness with dark mode support.

Open Preview

                <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:px-6 focus:py-3 focus:text-lg focus:shadow-lg focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-offset-orange-900 focus:ring-orange-800
    bg-gradient-to-br from-amber-700 to-orange-900 text-amber-50 rounded-xl
    border-t-2 border-l-2 border-r-4 border-b-4 border-amber-950
    shadow-[inset_0_3px_5px_rgba(255,255,255,0.2),inset_0_-3px_5px_rgba(0,0,0,0.3),0_6px_10px_rgba(0,0,0,0.4)]
    hover:from-amber-600 hover:to-orange-800
    active:from-amber-800 active:to-orange-950 active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.2)]
    transition-all duration-200 ease-out
    dark:from-amber-950 dark:to-orange-900 dark:text-amber-200
    dark:border-t-2 dark:border-l-2 dark:border-r-4 dark:border-b-4 dark:border-zinc-800
    dark:shadow-[inset_0_3px_5px_rgba(0,0,0,0.3),inset_0_-3px_5px_rgba(255,255,255,0.1),0_6px_10px_rgba(0,0,0,0.7)]
    dark:hover:from-amber-900 dark:hover:to-orange-800
    dark:active:from-amber-950 dark:active:to-orange-950 dark:active:shadow-[inset_0_3px_5px_rgba(255,255,255,0.1),inset_0_-3px_5px_rgba(0,0,0,0.3)]
    ">Skip to Main Content</a>
<main id="main-content" class="p-8 bg-orange-50 dark:bg-zinc-900 min-h-screen text-zinc-900 dark:text-zinc-100 flex flex-col justify-center items-center font-sans">
    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-orange-900 dark:text-orange-200 drop-shadow-md text-center">
        Welcome to Our Learning Platform
    </h1>
    <p class="text-xl md:text-2xl text-orange-800 dark:text-orange-300 mb-8 max-w-3xl text-center">
        Explore a world of knowledge and expand your horizons. This is placeholder content for the main section of your educational platform.
    </p>
    <img src="https://picsum.photos/seed/learn/800/450" alt="Autumn leaves and books" class="rounded-2xl shadow-xl border-4 border-amber-800 dark:border-amber-700 max-w-full h-auto mb-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course1/100/100" alt="Course thumbnail 1" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Course Title One</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Dive deep into the fundamentals of web development.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course2/100/100" alt="Course thumbnail 2" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Interactive Design</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Learn to create engaging user experiences.</p>
        </div>
        <div class="bg-amber-100 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border border-amber-200 dark:border-zinc-700 flex flex-col items-center">
            <img src="https://picsum.photos/seed/course3/100/100" alt="Course thumbnail 3" class="rounded-full w-24 h-24 mb-4 object-cover border-4 border-orange-700 dark:border-orange-500">
            <h3 class="text-2xl font-semibold mb-2 text-orange-900 dark:text-orange-200">Data Science Basics</h3>
            <p class="text-center text-orange-700 dark:text-orange-300">Uncover insights with powerful data analysis.</p>
        </div>
    </div>
</main>

Charts Component

A complex, responsive charts component with a Neon/Electric color scheme, inspired by Material Design for CRM/Business Tools. Includes multiple interactive elements and full dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row items-center justify-between mb-8 pb-4 border-b border-gray-300 dark:border-gray-700">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-teal-400 mb-2 sm:mb-0">Analytics Dashboard</h1>
    <div class="flex space-x-2">
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
        Today
      </button>
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-blue-600 hover:bg-blue-700 text-white shadow-xl transform hover:scale-105 transition duration-300 ease-in-out dark:bg-teal-500 dark:hover:bg-teal-600">
        Last 7 Days
      </button>
      <button class="px-4 py-2 rounded-lg text-sm font-semibold bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 transition duration-300 ease-in-out shadow-md">
        Last 30 Days
      </button>
    </div>
  </div>

  <!-- Key Metrics Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

    <!-- Sales Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-blue-500 dark:border-blue-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Sales</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">$12,345</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+5.2%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-blue-500 dark:text-blue-600 opacity-75" 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 2zm-1 15H9V9h2v8zm4 0h-2V7h2v10z"/>
        </svg>
      </div>
    </div>

    <!-- Customers Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-pink-500 dark:border-pink-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">New Customers</h3>
        <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-400">893</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-red-500 rotate-180" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-red-500 font-medium">-1.8%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-pink-500 dark:text-pink-600 opacity-75" 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 2zm0 3c1.38 0 2.5 1.12 2.5 2.5S13.38 10.5 12 10.5 9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08s5.97 1.09 6 3.08c-1.29 1.94-3.5 3.22-6 3.22z"/>
        </svg>
      </div>
    </div>

    <!-- Revenue Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-lime-500 dark:border-lime-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Total Revenue</h3>
        <p class="text-4xl font-extrabold text-lime-600 dark:text-lime-400">$34,567</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+7.1%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-lime-500 dark:text-lime-600 opacity-75" 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 17h-2v-6H9.5L12 5l2.5 8H13v6z"/>
        </svg>
      </div>
    </div>

    <!-- Retention Card -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-[1.02] border-b-4 border-purple-500 dark:border-purple-600">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-500 dark:text-gray-400 mb-2">Customer Retention</h3>
        <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-400">92%</p>
        <div class="flex items-center text-sm mt-3">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10 3.586l4.707 4.707a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="text-green-500 font-medium">+0.5%</span>
          <span class="text-gray-500 dark:text-gray-400 ml-1">than last month</span>
        </div>
      </div>
      <div class="absolute bottom-0 right-0 p-4 opacity-10">
        <svg class="w-12 h-12 text-purple-500 dark:text-purple-600 opacity-75" 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 2zm0 15c-.75 0-1.4-.24-1.92-.64C9.56 16.03 8.86 15 8.16 15c-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64C3.81 17 3 16.19 3 15.19 3 9.79 7.79 5 12 5s9 4.79 9 10.19c0 1.01-.81 1.81-1.81 1.81-.75 0-1.4-.24-1.92-.64-.52-.4-1.22-1.36-1.92-1.36-.7 0-1.4.97-1.92 1.36-.52.4-1.17.64-1.92.64z"/>
        </svg>
      </div>
    </div>
  </div>

  <!-- Main Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Sales Overview Chart -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sales Performance Overview</h2>
      <div class="flex items-center justify-end space-x-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
        <label for="sales-period" class="sr-only">Select Period</label>
        <select id="sales-period" class="bg-gray-100 dark:bg-gray-700 rounded-lg py-1 px-2 focus:ring-2 focus:ring-blue-500 dark:focus:ring-teal-400 outline-none">
          <option>Daily</option>
          <option selected>Weekly</option>
          <option>Monthly</option>
          <option>Yearly</option>
        </select>
        <button class="px-3 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"><span class="sr-only">Download</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414zM10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg></button>
      </div>
      
      <!-- Placeholder for a more complex chart (e.g., using an SVG or canvas library like Chart.js) -->
      <div class="flex-grow flex items-center justify-center bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4 h-64 lg:h-80">
        <div class="w-full h-full relative">
          <!-- Example simple SVG line chart -->
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid Lines -->
            <line x1="10" y1="50" x2="90" y2="50" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="40" x2="90" y2="40" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="30" x2="90" y2="30" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="20" x2="90" y2="20" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>
            <line x1="10" y1="10" x2="90" y2="10" stroke="#ccc" stroke-width="0.5" stroke-dasharray="2 2" class="dark:stroke-gray-700"/>

            <!-- Data Line 1 (Sales) -->
            <polyline points="10,45 25,25 40,35 55,15 70,20 85,10 90,5" fill="none" stroke="#3b82f6" stroke-width="2.5" class="dark:stroke-blue-400"/>
            <circle cx="10" cy="45" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="25" cy="25" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="40" cy="35" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="55" cy="15" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="70" cy="20" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="85" cy="10" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>
            <circle cx="90" cy="5" r="1.5" fill="#3b82f6" class="dark:fill-blue-400"/>

            <!-- Data Line 2 (Orders) -->
            <polyline points="10,50 25,40 40,48 55,38 70,45 85,30 90,25" fill="none" stroke="#ec4899" stroke-width="2.5" class="dark:stroke-pink-400"/>
            <circle cx="10" cy="50" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="25" cy="40" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="40" cy="48" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="55" cy="38" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="70" cy="45" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="85" cy="30" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>
            <circle cx="90" cy="25" r="1.5" fill="#ec4899" class="dark:fill-pink-400"/>

            <!-- X-axis labels (simplified) -->
            <text x="10" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Mon</text>
            <text x="30" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Tue</text>
            <text x="50" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Wed</text>
            <text x="70" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Thu</text>
            <text x="90" y="58" font-size="4" text-anchor="middle" fill="gray" class="dark:fill-gray-400">Fri</text>
          </svg>
           <div class="absolute bottom-2 left-6 text-xs text-gray-500 dark:text-gray-400">
            <div class="flex items-center mb-1">
              <span class="inline-block w-3 h-3 rounded-full mr-2 bg-blue-500 dark:bg-blue-400"></span> Sales
            </div>
            <div class="flex items-center">
              <span class="inline-block w-3 h-3 rounded-full mr-2 bg-pink-500 dark:bg-pink-400"></span> Orders
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Top Products Chart/List -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Top Selling Products</h2>
      
      <!-- Example Doughnut/Pie Chart Placeholder -->
      <div class="flex-shrink-0 flex items-center justify-center p-4 h-64 lg:h-auto lg:flex-grow bg-gray-50 dark:bg-gray-900 rounded-lg mb-4">
        <div class="w-48 h-48 rounded-full bg-gradient-to-br from-teal-400 via-blue-500 to-indigo-500 flex items-center justify-center text-white text-lg font-bold shadow-inner dark:from-teal-500 dark:via-blue-600 dark:to-indigo-600">
          <span class="font-extrabold text-2xl">65%</span>
          <span class="absolute text-xs bottom-12">Product A</span>
        </div>
      </div>

      <ul class="space-y-3">
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-blue-500 dark:text-blue-400 font-semibold">Product A</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">$5,100</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-pink-500 dark:text-pink-400 font-semibold">Product B</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200">$3,200</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-lime-500 dark:text-lime-400 font-semibold">Product C</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-lime-100 dark:bg-lime-900 text-lime-800 dark:text-lime-200">$2,045</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span class="text-purple-500 dark:text-purple-400 font-semibold">Product D</span>
          <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200">$1,560</span>
        </li>
      </ul>
    </div>

    <!-- Customer Segment Chart -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Customer Segments</h2>
       <div class="flex-shrink-0 flex items-center justify-center p-4 bg-gray-50 dark:bg-gray-900 rounded-lg mb-4 h-64 lg:h-auto lg:flex-grow">
        <div class="w-full h-full relative">
          <!-- Example Simple Bar Chart -->
          <div class="absolute bottom-0 left-0 w-full h-full flex items-end justify-around pb-2">
            <div class="flex flex-col items-center">
              <div class="bg-purple-500 dark:bg-purple-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 80%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">New</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-blue-500 dark:bg-blue-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 95%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Active</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-pink-500 dark:bg-pink-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 60%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Churned</p>
            </div>
            <div class="flex flex-col items-center">
              <div class="bg-lime-500 dark:bg-lime-400 rounded-t-sm w-8 sm:w-10 transform transition-all duration-500 ease-out" style="height: 45%;"></div>
              <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Loyal</p>
            </div>
          </div>
        </div>
      </div>
      <ul class="space-y-3">
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>New Leads</span>
          <span class="font-bold text-lg text-purple-600 dark:text-purple-400">1,234</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Active Users</span>
          <span class="font-bold text-lg text-blue-600 dark:text-blue-400">5,678</span>
        </li>
        <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Churn Rate</span>
          <span class="font-bold text-lg text-pink-600 dark:text-pink-400">15%</span>
        </li>
         <li class="flex items-center justify-between text-gray-700 dark:text-gray-300">
          <span>Loyalty Score</span>
          <span class="font-bold text-lg text-lime-600 dark:text-lime-400">8.9</span>
        </li>
      </ul>
    </div>

    <!-- Recent Activities Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Activities</h2>
      <div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
        <ul class="space-y-4">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Closed <span class="text-blue-500 dark:text-blue-400 font-semibold">#CRM-1234</span> deal for <span class="font-semibold">$5000</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">1 hour ago</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Updated customer notes for <span class="text-pink-500 dark:text-pink-400 font-semibold">Alice Johnson</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">3 hours ago</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">David Lee</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Sent a follow-up email to <span class="text-lime-500 dark:text-lime-400 font-semibold">Bob Williams</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">Yesterday</time>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sarah Chen</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Created new task: <span class="text-purple-500 dark:text-purple-400 font-semibold">Onboard new client ABC Corp</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">2 days ago</time>
            </div>
          </li>
           <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Michael Brown</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Logged call with <span class="text-blue-500 dark:text-blue-400 font-semibold">XYZ Solutions</span></p>
              <time class="text-xs text-gray-400 dark:text-gray-500">3 days ago</time>
            </div>
          </li>
           <li class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3 bg-gray-200" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Emily White</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Completed task: <span class="text-pink-500 dark:text-pink-400 font-semibold">Prepare Q3 report</span></p>
              <time class="text-xs text-gray-400 darker:text-gray-500">4 days ago</time>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- Upcoming Tasks/Meetings -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 relative flex flex-col transform transition-transform duration-300 hover:scale-[1.01]">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Upcoming Schedule</h2>
      <div class="overflow-y-auto max-h-72 lg:max-h-96 pr-2 -mr-2 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-900">
        <ul class="space-y-4">
          <li class="border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Meeting with Acme Corp</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Today, 2:00 PM - 3:00 PM</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Lead: John Doe</p>
          </li>
          <li class="border-l-4 border-lime-500 dark:border-lime-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Prepare Q4 Sales Forecast</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Due: Tomorrow, 5:00 PM</p>
            <p class="text-xs text-gray-500 dark:text-gray-500">Assigned to: Jane Smith</p>
          </li>
          <li class="border-l-4 border-purple-500 dark:border-purple-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Client Pitch Deck Review</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Fri, Nov 17, 10:00 AM</p>
             <p class="text-xs text-gray-500 dark:text-gray-500">Participants: Sarah Chen, David Lee</p>
          </li>
          <li class="border-l-4 border-pink-500 dark:border-pink-600 pl-4 py-2 bg-gray-50 dark:bg-gray-900 rounded-md shadow-sm">
            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">Team Sync Meeting</p>
            <p class="text-xs text-gray-600 dark:text-gray-400">Mon, Nov 20, 9:00 AM</p>
             <p class="text-xs text-gray-500 dark:text-gray-500">Location: Conference Room 3</p>
          </li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Contact Quick Access -->
  <div class="mt-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl p-6 transform transition-transform duration-300 hover:scale-[1.005]">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Quick Customer Access</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Alice Johnson</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Acme Corp</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-pink-600 dark:group-hover:text-pink-400">Bob Williams</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Global Solutions</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-lime-600 dark:group-hover:text-lime-400">Carol Davis</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Innovate LLC</p>
        </div>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-purple-600 dark:group-hover:text-purple-400">Daniel Miller</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Quantum Tech</p>
        </div>
      </a>
       <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 transform hover:scale-105 group">
        <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Customer Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-teal-400">Eve Taylor</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Future Sols</p>
        </div>
      </a>
    </div>
  </div>

</div>

Food Delivery Dashboard Layout Component

A complex, responsive food delivery dashboard layout with a dark UI and candy/sweet color scheme, featuring a sidebar, header, main content area, and multiple interactive elements for a food/restaurant application. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-100 dark:bg-gray-950 dark:text-gray-100 transition-colors duration-300 font-sans">
  <div class="flex flex-col lg:flex-row min-h-screen">

    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-gray-900 border-b border-gray-800 lg:border-r lg:border-b-0 border-pink-600/30 lg:border-pink-600/30 p-4 flex flex-col flex-shrink-0 dark:bg-gray-900 dark:border-gray-800 dark:border-pink-600/30 transition-colors duration-300">
      <div class="flex items-center justify-between lg:justify-start mb-6">
        <h1 class="text-2xl font-extrabold text-pink-500 tracking-wider">FoodieDash</h1>
        <button class="lg:hidden text-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 invert dark:invert-0">
          <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 12h16M4 18h16"></path></svg>
        </button>
      </div>
      <nav class="flex flex-col space-y-3">
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium bg-pink-600 text-white shadow-lg shadow-pink-500/30 hover:bg-pink-700 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Orders
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
          Menu Items
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.195-1.264-.544-1.76M7 20v-2a3 3 0 015.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M12 18a6 6 0 100-12 6 6 0 000 12z"></path></svg>
          Customers
        </a>
        <a href="#" class="flex items-center px-4 py-2 rounded-lg text-lg font-medium text-gray-300 hover:bg-gray-800 hover:text-pink-400 transition-all duration-200">
          <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto pt-6 border-t border-gray-800 border-pink-600/30 flex items-center justify-between">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-mint-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div class="flex flex-col">
            <span class="text-sm font-semibold text-gray-200">Jane Doe</span>
            <span class="text-xs text-gray-400">Admin</span>
          </div>
        </div>
        <button class="text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-md p-1 transform hover:scale-110 transition-transform duration-200">
          <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 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
        </button>
      </div>
    </aside>

    <!-- Main Content Area -->
    <div class="flex-1 flex flex-col overflow-hidden">

      <!-- Top Header -->
      <header class="flex items-center justify-between p-4 bg-gray-900 border-b border-gray-800 border-mint-600/30 shadow-md dark:bg-gray-900 dark:border-gray-800 dark:border-mint-600/30 transition-colors duration-300 z-10">
        <div class="relative w-full max-w-md mx-auto lg:mx-0">
          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <input type="text" placeholder="Search for food, orders, customers..." class="w-full py-2 pl-10 pr-4 rounded-xl bg-gray-800 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-mint-500 focus:border-transparent transition-all duration-200">
        </div>
        <div class="flex items-center space-x-4 ml-4">
          <button class="p-2 text-gray-400 hover:text-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h.01M12 21v-4m0 0V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7m-7 7l4 4m0 0l4-4"></path></svg>
          </button>
          <button class="p-2 text-gray-400 hover:text-mint-400 focus:outline-none focus:ring-2 focus:ring-mint-500 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
            <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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path></svg>
          </button>
        </div>
      </header>

      <!-- Main Content -->
      <main class="flex-1 overflow-x-hidden overflow-y-auto p-4 md:p-6 bg-gray-950 dark:bg-gray-950 transition-colors duration-300">

        <h2 class="text-3xl font-extrabold text-pink-400 mb-6">Dashboard Overview</h2>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Total Orders</p>
              <p class="text-4xl font-bold text-mint-400">1,234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+12% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Revenue</p>
              <p class="text-4xl font-bold text-pink-400">$87,654</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+8% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">New Customers</p>
              <p class="text-4xl font-bold text-sky-400">234</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">+5% from last month</span>
          </div>
          <div class="bg-gray-800 rounded-xl p-5 shadow-lg shadow-gray-700/20 flex flex-col justify-between transform hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm text-gray-400 mb-2">Pending Orders</p>
              <p class="text-4xl font-bold text-orange-400">47</p>
            </div>
            <span class="text-xs text-gray-500 mt-3">Needs attention</span>
          </div>
        </div>

        <!-- Recent Orders & Top Selling Items -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
          <!-- Recent Orders -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-mint-400 mb-4">Recent Orders</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full text-left text-gray-300">
                <thead>
                  <tr class="border-b border-gray-700 text-gray-500">
                    <th class="py-2 px-3">Order ID</th>
                    <th class="py-2 px-3">Customer</th>
                    <th class="py-2 px-3">Amount</th>
                    <th class="py-2 px-3">Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8765</td>
                    <td class="py-3 px-3">Alice Smith</td>
                    <td class="py-3 px-3 text-pink-400">$45.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8764</td>
                    <td class="py-3 px-3">Bob Johnson</td>
                    <td class="py-3 px-3 text-pink-400">$32.50</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-sky-600/20 text-sky-400">Processing</span>
                    </td>
                  </tr>
                  <tr class="border-b border-gray-800 hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8763</td>
                    <td class="py-3 px-3">Charlie Brown</td>
                    <td class="py-3 px-3 text-pink-400">$60.00</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-600/20 text-orange-400">Pending</span>
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-800 transition-colors duration-150">
                    <td class="py-3 px-3 font-semibold">#ORD8762</td>
                    <td class="py-3 px-3">Diana Prince</td>
                    <td class="py-3 px-3 text-pink-400">$28.75</td>
                    <td class="py-3 px-3">
                      <span class="px-2 py-1 text-xs font-semibold rounded-full bg-mint-600/20 text-mint-400">Delivered</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Top Selling Items -->
          <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
            <h3 class="text-xl font-bold text-pink-400 mb-4">Top Selling Items</h3>
            <ul class="space-y-4">
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=1" alt="Spicy Thai Noodles" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Spicy Thai Noodles</p>
                  <p class="text-sm text-gray-400">150 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$14.99</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=2" alt="Classic Cheeseburger" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Classic Cheeseburger</p>
                  <p class="text-sm text-gray-400">120 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$12.50</p>
                </div>
              </li>
              <li class="flex items-center space-x-4 bg-gray-800 rounded-lg p-3 hover:bg-gray-700 transition-colors duration-200">
                <img src="https://picsum.photos/80/80?random=3" alt="Vegan Buddha Bowl" class="w-16 h-16 object-cover rounded-md border border-gray-700">
                <div>
                  <p class="font-semibold text-white">Vegan Buddha Bowl</p>
                  <p class="text-sm text-gray-400">98 Orders</p>
                  <p class="text-md text-mint-400 font-bold">$13.00</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20 mb-8">
          <h3 class="text-xl font-bold text-sky-400 mb-4">Quick Actions</h3>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-pink-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-pink-400 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Add New Item</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-mint-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-mint-400 group-hover:text-white transition-colors duration-200" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">View All Orders</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-orange-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-orange-400 group-hover:text-white transition-colors duration-200" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Manage Categories</span>
            </button>
            <button class="flex flex-col items-center p-4 bg-gray-800 rounded-lg group hover:bg-sky-600 transition-all duration-200 transform hover:scale-105 shadow-md shadow-gray-700/20">
              <svg class="w-8 h-8 mb-2 text-sky-400 group-hover:text-white transition-colors duration-200" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-gray-200 font-medium group-hover:text-white">Send Notification</span>
            </button>
          </div>
        </div>

        <!-- Customer Reviews (Example Section) -->
        <div class="bg-gray-900 rounded-xl p-6 shadow-lg shadow-gray-800/20">
          <h3 class="text-xl font-bold text-mint-400 mb-4">Latest Customer Reviews</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-pink-400 flex-shrink-0" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">John Davis</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"Great food and fast delivery! Highly recommend the pasta."</p>
                <p class="text-xs text-gray-500 mt-2">2 days ago</p>
              </div>
            </div>
            <div class="bg-gray-800 rounded-lg p-4 flex items-start space-x-4 shadow-md shadow-gray-700/20">
              <img class="w-12 h-12 rounded-full border-2 border-mint-400 flex-shrink-0" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
              <div class="flex-1">
                <h4 class="font-semibold text-white">Emily White</h4>
                <div class="flex items-center text-yellow-400 text-sm mb-1">
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                  <svg class="w-4 h-4 fill-current text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.356 1.209-6.064 5.918 1.432 8.324L12 18.896l-7.392 3.882 1.432-8.324L.976 9.364l8.356-1.209L12 .587z"/></svg>
                </div>
                <p class="text-gray-300 text-sm">"The delivery was a bit slow, but the pizza was delicious!"</p>
                <p class="text-xs text-gray-500 mt-2">4 days ago</p>
              </div>
            </div>
          </div>
        </div>

      </main>
    </div>

  </div>
</div>

Skeuomorphic_Fashion_Card

A simple, responsive content display card for fashion/beauty products, designed with a skeuomorphic aesthetic using corporate blue tones. Includes dark mode support.

Open Preview

                <div class="flex justify-center items-center min-h-screen p-4 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950">
  <div class="w-full max-w-sm mx-auto rounded-3xl p-6
              bg-gradient-to-br from-blue-100 to-blue-300 shadow-2xl shadow-blue-400/50
              dark:from-blue-900 dark:to-blue-700 dark:shadow-blue-950/80
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-blue-500/60 dark:hover:shadow-blue-900/90
              relative overflow-hidden border-2 border-blue-200 dark:border-blue-800">

    <!-- Inner Bevel Top-Left -->
    <div class="absolute inset-0 rounded-3xl
                shadow-inner shadow-blue-50/50 dark:shadow-blue-800/50
                pointer-events-none"
         style="box-shadow: inset 5px 5px 10px rgba(255,255,255,0.3), inset -5px -5px 10px rgba(0,0,0,0.1);">
    </div>

    <!-- Inner Bevel Bottom-Right for Dark Mode -->
    <div class="absolute inset-0 rounded-3xl
                dark:shadow-inner dark:shadow-blue-950/50
                pointer-events-none"
         style="box-shadow: inset -5px -5px 10px rgba(0,0,0,0.3), inset 5px 5px 10px rgba(255,255,255,0.1);">
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-32 h-32 rounded-full overflow-hidden mb-4
                  border-4 border-blue-300 dark:border-blue-700
                  shadow-xl shadow-blue-400/40 dark:shadow-blue-950/70
                  transform transition-all duration-300 hover:scale-105">
        <img src="https://picsum.photos/id/78/200/200" alt="Product Image" class="w-full h-full object-cover">
      </div>

      <h3 class="text-xl md:text-2xl font-bold mb-2 text-blue-800 dark:text-blue-200 drop-shadow-md">
        AquaBloom Moisturizer
      </h3>
      <p class="text-sm text-blue-700 dark:text-blue-300 mb-4 px-2 tracking-wide">
        Infused with deep-sea minerals for radiant, hydrated skin.
      </p>

      <div class="mb-4">
        <span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100 drop-shadow-lg">$49.99</span>
      </div>

      <button type="button" class="w-full px-6 py-3 rounded-full text-lg font-semibold
                  bg-gradient-to-br from-blue-600 to-blue-800 text-white
                  shadow-xl shadow-blue-700/50 dark:shadow-blue-900/70
                  active:bg-gradient-to-tl active:from-blue-700 active:to-blue-900
                  transform transition-all duration-200
                  hover:scale-[1.02] hover:shadow-blue-800/60 dark:hover:shadow-blue-800/80
                  relative overflow-hidden
                  before:absolute before:inset-0 before:bg-white before:bg-opacity-0 hover:before:bg-opacity-10 before:rounded-full before:transition-all before:duration-300">
        Add to Cart
      </button>
      <div class="mt-4 flex gap-x-2 text-blue-700 dark:text-blue-300">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.042a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.042a1 1 0 00-1.176 0l-2.817 2.042c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
        <span>4.8 (120 reviews)</span>
      </div>
    </div>
  </div>
</div>

Brutalist_Music_Loader

A brutalist-inspired loading component for music/audio platforms, featuring high-contrast purple/violet tones and responsive design with dark mode support. Simulates a 'music wave' or 'playback' loading state.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-neutral-900 p-4 font-mono select-none overflow-hidden">
  <div class="relative w-full max-w-sm md:max-w-md lg:max-w-lg bg-pink-300 dark:bg-purple-950 border-4 border-neutral-900 dark:border-pink-300 shadow-[8px_8px_0_0_#171717] dark:shadow-[8px_8px_0_0_#fbcfe8] p-6 sm:p-8 flex flex-col items-center justify-center space-y-8 rounded-none">
    
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-neutral-900 dark:text-pink-300 uppercase tracking-tighter text-center leading-none mt-2">
      Loading //
    </h1>

    <div class="w-full flex justify-center items-center h-24 space-x-2 md:space-x-3 mb-4">
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-1"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-2"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-3"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-4"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-5"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-6"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-7"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-8"></div>
      <div class="w-4 h-full bg-purple-700 dark:bg-violet-400 group-hover:scale-y-110 origin-bottom rounded-none animate-brutalist-wave-9"></div>
    </div>

    <p class="text-lg sm:text-xl font-bold text-neutral-900 dark:text-pink-300 uppercase text-center border-b-4 border-neutral-900 dark:border-pink-300 pb-1 mt-4">
      Stand by for sonic assault.
    </p>
    
    <div class="absolute bottom-2 right-2 text-neutral-900 dark:text-pink-300 text-xs sm:text-sm font-semibold tracking-wide">
      [v.2.0.24] 
    </div>
  </div>

  <style>
    @keyframes brutalist-wave {
      0%, 100% { transform: scaleY(0.4); }
      20% { transform: scaleY(1); }
      40% { transform: scaleY(0.2); }
      60% { transform: scaleY(0.7); }
      80% { transform: scaleY(0.4); }
    }
    .animate-brutalist-wave-1 { animation: brutalist-wave 1.8s ease-in-out infinite; }
    .animate-brutalist-wave-2 { animation: brutalist-wave 1.8s ease-in-out infinite 0.1s; }
    .animate-brutalist-wave-3 { animation: brutalist-wave 1.8s ease-in-out infinite 0.2s; }
    .animate-brutalist-wave-4 { animation: brutalist-wave 1.8s ease-in-out infinite 0.3s; }
    .animate-brutalist-wave-5 { animation: brutalist-wave 1.8s ease-in-out infinite 0.4s; }
    .animate-brutalist-wave-6 { animation: brutalist-wave 1.8s ease-in-out infinite 0.5s; }
    .animate-brutalist-wave-7 { animation: brutalist-wave 1.8s ease-in-out infinite 0.6s; }
    .animate-brutalist-wave-8 { animation: brutalist-wave 1.8s ease-in-out infinite 0.7s; }
    .animate-brutalist-wave-9 { animation: brutalist-wave 1.8s ease-in-out infinite 0.8s; }
  </style>
</div>

Registration Form Component

A responsive registration form component designed with a neumorphic style using muted/desaturated colors, suitable for a dashboard environment. It includes dark mode support and uses subtle shadows to create an extruded effect.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-md p-8 rounded-xl shadow-lg dark:shadow-xl dark:bg-gray-700 bg-gray-200
              dark:border dark:border-gray-600
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]">
    <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-6 text-center">Register Account</h2>

    <form>
      <div class="mb-4">
        <label for="username" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Username</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Username field">
      </div>

      <div class="mb-4">
        <label for="email" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Email</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Email field">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-600 dark:text-gray-400 text-sm font-medium mb-2">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="w-full p-3 rounded-lg bg-gray-200 dark:bg-gray-700
               text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-400
               [box-shadow:inset_3px_3px_6px_#bebebe,_inset_-3px_-3px_6px_#ffffff]
               dark:[box-shadow:inset_3px_3px_6px_#333333,_inset_-3px_-3px_6px_#555555]" aria-label="Password field">
      </div>

      <button type="submit" class="w-full p-3 rounded-lg font-semibold text-white
              bg-blue-500 hover:bg-blue-600 active:bg-blue-700
              shadow-md hover:shadow-lg dark:shadow-md dark:hover:shadow-lg
              [box-shadow:8px_8px_16px_#bebebe,_-8px_-8px_16px_#ffffff]
              dark:[box-shadow:8px_8px_16px_#333333,_-8px_-8px_16px_#555555]
              focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2
              dark:focus:ring-offset-gray-700 transition-all duration-200"
              aria-label="Register button">
        Register
      </button>

      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
        Already have an account? <a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium" aria-label="Login link">Login here</a>
      </p>
    </form>
  </div>
</div>