CCHub Logo CCHub Tailwind Collection
구성 요소 대시보드 Neumorphic_Forum_Dashboard

Neumorphic_Forum_Dashboard

포레스트/그린 색상 팔레트가 있는 간단하고 반응이 빠른 뉴모픽 대시보드 구성 요소로, 포럼 및 커뮤니티 플랫폼용으로 설계되었으며 다크 모드 지원이 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gradient-to-br from-green-50 to-green-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">

    <!-- Main Neumorphic Card -->
    <div class="bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-800 dark:to-gray-700 shadow-xl shadow-green-200/50 dark:shadow-gray-950/50 rounded-3xl p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-green-800 dark:text-green-300 mb-6 text-center">Forum Dashboard</h1>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Discussions Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Latest Discussions</h2>
          <ul class="space-y-3">
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"New ideas for community events"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">3h ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"Feedback on the new forum features"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">1d ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"General chat about web development"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">2d ago</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- Quick Stats Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Community Stats</h2>
          <div class="grid grid-cols-2 gap-4">
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">1,234</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Users</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">567</p>
              <p class="text-sm text-green-700 dark:text-green-400">Active Today</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">89</p>
              <p class="text-sm text-green-700 dark:text-green-400">New Topics</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">2,456</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Posts</p>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Button -->
      <div class="mt-8 text-center">
        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-green-600 group-hover:from-green-400 group-hover:to-green-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 transition-all duration-300 ease-in-out shadow-lg shadow-green-400/50 dark:shadow-green-800/50 active:shadow-inner active:shadow-green-500/50 dark:active:shadow-green-900/50">
          <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-700 dark:to-gray-600 rounded-md group-hover:from-green-400 group-hover:to-green-600 group-hover:bg-opacity-0">
            Start New Discussion
          </span>
        </button>
      </div>

    </div>

  </div>
</div>

관련 구성 요소

Dashboard_Agriculture_ForestGreen_Luxury

농업 및 농업 웹 사이트를 위해 설계된 복잡한 럭셔리 테마의 대시보드 구성 요소로, 우아한 숲/녹색 색상 팔레트와 다크 모드 지원으로 완벽한 응답성을 제공합니다.

열다

Brutalist Grayscale Dashboard 구성 요소

비즈니스/기업 웹 사이트를 위한 단순하고 브루탈리즘 스타일의 그레이스케일 대시보드 레이아웃으로, 다크 모드 지원으로 반응하며 Tailwind CSS로 구축되었습니다.

열다

Dashboards 구성 요소

비즈니스 또는 기업 웹 사이트를 위해 설계된 복고풍 대시보드 구성 요소로, 80년대/90년대의 미학과 현대적인 레이아웃 및 색 구성표를 결합합니다. 반응형이며 어두운 테마를 지원하며 통계 카드, 사용자 프로필 등과 같은 대화형 요소를 제공합니다.

열다