HTML 代码
<div class="container mx-auto p-4 antialiased text-gray-800 dark:text-gray-200">
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
<div class="px-6 py-5">
<div class="text-center">
<h3 class="mb-1 text-xl font-bold">Community Forum</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Discuss and share with the community</p>
</div>
</div>
<div class="flex-auto p-6">
<div class="relative w-full">
<input type="text" placeholder="Search topics..." class="px-3 py-3 placeholder-gray-600 dark:placeholder-gray-400 text-gray-800 dark:text-gray-200 relative bg-gray-300 dark:bg-gray-700 rounded text-sm shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark outline-none border-none focus:outline-none focus:shadow-outline w-full pr-10">
<span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-600 dark:text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</span>
</div>
<div class="mt-6">
<div class="flex items-center justify-between mb-4">
<h4 class="text-md font-semibold">Recent Discussions</h4>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">View All</a>
</div>
<ul class="list-none">
<li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Discussion Topic 1</p>
<span class="text-xs text-gray-600 dark:text-gray-400">Started by John Doe</span>
</div>
</div>
</li>
<li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Discussion Topic 2</p>
<span class="text-xs text-gray-600 dark:text-gray-400">Started by Jane Smith</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 7px 7px 14px #717171, -7px -7px 14px #8f8f8f;
}
.shadow-neumorphic-input-light {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-input-dark {
box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #8f8f8f;
}
.shadow-neumorphic-item-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-item-dark {
box-shadow: 5px 5px 10px #717171, -5px -5px 10px #8f8f8f;
}
</style>