検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

Neumorphic User Profiles コンポーネント

ニューモルフィックなデザインスタイルとオーシャン/ブルーの配色を備えた、複雑でレスポンシブなユーザープロファイルコンポーネントで、ビジネス/企業のWebサイトに適しています。ダークモードのサポートが含まれています。

                <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

ファッション/ビューティーブランド向けの複雑で応答性の高いナビゲーションコンポーネントで、スイス/インターナショナルタイポグラフィのデザイン原則に準拠し、企業のブルーカラースキームを採用しています。ダークモードのサポートと複数のインタラクティブ要素が含まれています。

開けるプレビュー

                <!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>

アールデコ調のタグクラウドコンポーネント

アールデコ調の美学でデザインされたレスポンシブタグクラウドコンポーネントで、幾何学模様と豪華なブルーの色調が特徴で、ソーシャルメディアインターフェースに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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

金融/銀行アプリケーション向けのシンプルで応答性の高いナビゲーションコンポーネントで、キャンディー/スウィートの配色と微妙な3Dデザイン要素が特徴で、ダークモードがサポートされています。

開けるプレビュー

                <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 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>

グラフコンポーネント

ネオン/エレクトリックの配色を備えた複雑で応答性の高いチャートコンポーネントで、CRM /ビジネスツールのマテリアルデザインに触発されています。複数のインタラクティブ要素と完全なダークモードのサポートが含まれています。

開けるプレビュー

                <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>

フードデリバリーダッシュボードレイアウトコンポーネント

ダークなUIとキャンディー/スイーツの配色を備えた、複雑でレスポンシブなフードデリバリーダッシュボードのレイアウトで、サイドバー、ヘッダー、メインコンテンツエリア、およびフード/レストランアプリケーション用の複数のインタラクティブ要素を備えています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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

ファッション/美容製品用のシンプルでレスポンシブなコンテンツ表示カードで、企業の青い色調を使用してスキューモーフィックな美学でデザインされています。ダークモードのサポートが含まれています。

開けるプレビュー

                <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

ブルータリズムにインスパイアされた音楽/オーディオプラットフォーム用のローディングコンポーネントで、ハイコントラストのパープル/バイオレットトーンと、ダークモードをサポートするレスポンシブデザインが特徴です。「ミュージックウェーブ」または「再生」の読み込み状態をシミュレートします。

開けるプレビュー

                <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>

登録フォームコンポーネント

ダッシュボード環境に適した、落ち着いた/彩度の低い色を使用したニューモーフィックスタイルで設計されたレスポンシブ登録フォームコンポーネント。ダークモードのサポートが含まれており、微妙な影を使用して押し出し効果を作成します。

開けるプレビュー

                <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>

検索コンポーネント

カテゴリ

すべてのコンポーネント