Community Forum 구성 요소
포트폴리오를 위한 Neumorphism 스타일의 커뮤니티 포럼 구성 요소로, 파스텔 색상 구성표와 어두운 테마를 지원하는 복잡하고 반응이 빠른 디자인을 특징으로 합니다. 여기에는 포럼 목록, 최근 활동 및 사용자 프로필이 포함되며, 모두 JavaScript 없이 Tailwind CSS를 사용하여 구현됩니다.
HTML 코드
<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
<div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Sidebar: Forum Categories/List -->
<div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
<ul>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
</a>
</li>
<li class="mb-4">
<a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
<span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
</a>
</li>
</ul>
</div>
<!-- Main Content: Forum Threads -->
<div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>
<!-- Thread Card 1 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
<span>2 hours ago</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
15
</span>
</div>
</div>
</div>
<!-- Thread Card 2 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
<span>5 hours ago</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
27
</span>
</div>
</div>
</div>
<!-- Thread Card 3 -->
<div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
<span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
<span>Yesterday</span>
<span class="ml-auto flex items-center">
<svg class="w-4 h-4 mr-1 text-green-500" 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.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
12
</span>
</div>
</div>
</div>
<button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
Load More Threads
</button>
</div>
</div>
</div>
<style>
/* Neumorphic Shadows - Light Mode */
.shadow-neumorphic-light {
box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
}
.shadow-neumorphic-flat-light {
box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-inset-light {
box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-pressed-light {
box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
}
/* Neumorphic Shadows - Dark Mode */
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
}
.dark .shadow-neumorphic-flat-dark {
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
}
.dark .shadow-neumorphic-inset-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
}
/* Pastel Colors for Light Mode */
.bg-gray-200 { background-color: #e0e5ec; } /* Light background */
.bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
.text-gray-700 { color: #5c6a7e; }
.text-gray-600 { color: #7f8fa5; }
.text-blue-400 { color: #87ceeb; } /* Sky Blue */
.text-green-400 { color: #98fb98; } /* Pale Green */
.text-purple-400 { color: #dda0dd; } /* Plum */
.text-red-400 { color: #f08080; } /* Light Coral */
.border-blue-300 { border-color: #a7d9f7; }
.border-pink-300 { border-color: #f7a7d9; }
.border-green-300 { border-color: #b3f7a7; }
/* Pastel Colors for Dark Mode */
.dark\:bg-gray-800 { background-color: #2c2c2c; }
.dark\:bg-gray-700 { background-color: #3a3a3a; }
.dark\:bg-gray-600 { background-color: #4a4a4a; }
.dark\:text-gray-200 { color: #e0e0e0; }
.dark\:text-gray-300 { color: #c0c0c0; }
.dark\:text-gray-400 { color: #a0a0a0; }
.dark\:text-gray-100 { color: #f0f0f0; }
.dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
.dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
.dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
.dark\:border-blue-500 { border-color: #4682b4; }
.dark\:border-pink-500 { border-color: #c71585; }
.dark\:border-green-500 { border-color: #2e8b57; }
.dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }
</style>
<script>
// You can toggle dark mode with a simple script if needed,
// for example, by adding/removing the "dark" class to the root element.
// This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>관련 구성 요소
Community Forum 구성 요소
날씨 및 기후 토론을 위한 종이/인쇄물에서 영감을 받은 복잡한 커뮤니티 포럼 구성 요소로, 보색 구성표와 다크 모드 지원으로 완전한 응답성을 사용합니다.
Community Forum 구성 요소
Tailwind CSS로 구축된 소셜 미디어 목적을 위해 Skeuomorphism 디자인, 트라이어드 색 구성표 및 단순 복잡성을 갖춘 커뮤니티 포럼 구성 요소입니다. 반응형 디자인과 어두운 테마 지원이 포함됩니다.
Community Forum 구성 요소
커뮤니티 포럼 뉴모피즘 디자인, 그레이스케일 색 구성표 및 Tailwind CSS를 사용하는 소셜 미디어용 단순 복잡성이 있는 구성 요소. 어두운 테마를 지원하는 반응형 디자인.