<div class="w-full md:px-4">
	<div class="relative w-full max-w-screen-2xl mx-auto flex flex-col py-4 items-start bg-gray-800 rounded-t lights">
		<div class="grid grid-cols-4 divide-x divide-gray-900">
			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
					Noteworthy Threads
				</h2>
				<ul class="flex flex-col mb-0">
					<li class="flex rounded p-2.5 -mx-2.5 hover:bg-gray-700">
						<div class="flex items-center justify-center h-10 px-4 rounded-md shadow-sm bg-gray-900 shadow-inset-t-white-05">
							<span class="font-bold text-gray-200">55</span>
						</div>
						<div class="pl-3 mt-[-1px]">
							<a href="/post/16583/" class="block font-bold text-gray-100">
								[MEGATHREAD] posts here marseys (or other emojis) u want added
							</a>
							<small class="block text-gray-400">
								posted by <a href="/@aevann" class="text-gray-400 hover:text-gray-300">@aevann</a>
							</small>
						</div>
					</li>
					<li class="flex rounded p-2.5 -mx-2.5 hover:bg-gray-700">
						<div class="flex items-center justify-center h-10 px-4 rounded-md shadow-sm bg-gray-900 shadow-inset-t-white-05">
							<span class="font-bold text-gray-200">25</span>
						</div>
						<div class="pl-3 mt-[-1px]">
							<a href="https://rdrama.net/post/23770/suggestion-some-award-ideas" class="block font-bold text-gray-100">
								[Suggestion] Some award ideas
							</a>
							<small class="block text-gray-400">
								posted by <a href="/@dramarama" class="text-gray-400 hover:text-gray-300">@dramarama</a>
							</small>
						</div>
					</li>
				</ul>
			</div>
			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
					Quote of the Week
				</h2>
				<div class="flex flex-col gap-2">
					<div class="bg-gray-700 shadow-inner border border-gray-900 rounded-md overflow-hidden">
						<p class="p-2 text-sm font-serif italic text-gray-300">
							"People who open presents and celebrate on Christmas Eve may be godless heathens damned to eternal suffering in the deepest layer of hell, but I'm willing look past it for the sake of these cute oversized squirrels. Here's one trying to say hi up at our cabin."
						</p>
						<div class="p-2 bg-gray-700 border-t border-gray-800 shadow-inset-t-white-05">
							<img loading="lazy" src="https://i.imgur.com/92Oq1k1.webp" class="inline-block flex-shrink-0 object-cover h-9 w-9 p-[3px] bg-white border border-gray-800" alt="avatar"/>
							<strong class="pl-1 text-sm font-bold">
								<a href="https://rdrama.com/post/32017/merry-christmas/1063687?context=9#context" class="text-gray-300 hover:text-gray-200">
									@Slugabed
								</a>
							</strong>
						</div>
					</div>
				</div>
			</div>
			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
					Newest Members
				</h2>
				<ul class="hidden flex-wrap gap-x-3 gap-y-2 mb-3">
					{% for user in kek %}
					<li class="w-10 flex-shrink-0 overflow-hidden">
						<img loading="lazy" src="{{ user.profile_url }}" class="object-cover h-10 w-10 rounded bg-white inner-shadow" alt="avatar"/>
						<small class="block">{{ user.username }}</small>
					</li>
					{% endfor %}
				</ul>
				<p class="text-gray-500 text-xs">
					Coming soon...
				</p>
				{% if not v %}
				<div class="leading-none">
					<a href="/signup" class="text-red-600 font-bold text-xs">Become an rdramanaut</a>
				</div>
				<div class="leading-none mt-1">
					<a href="/login" class="text-gray-500 font-bold text-xs">or log in</a>
				</div>
				{% endif %}
			</div>
			<div class="col-span-full md:col-span-1 px-4 py-2 shadow-inset-r-white-05">
				<h2 class="font-bold text-gray-400 dark:text-gray-500 text-xl font-heading leading-normal mb-2">
					rdrama
				</h2>
				<p class="mt-1 text-xs text-gray-500">
					rdrama caters to drama in all forms such as: Real life, videos, images, gossip, rumors, news sites, Reddit, and Beyond™. There is no drama we won't touch, and we want it all.
				</p>
			</div>
		</div>
		<div class="mt-4 w-full px-4 sm:px-0">
			<ul class="mx-auto max-w-2xl flex flex-col md:flex-row md:items-center md:justify-center md:space-x-3 md:divide-x md:divide-gray-700 text-xs font-medium leading-none">
				<li>
					<a href="/post/5500" class="text-gray-500 hover:text-gray-400">
						About
					</a>
				</li>
				<li class="mt-4 md:mt-0 md:pl-3">
					<a href="/contact" class="text-gray-500 hover:text-gray-400">
						Contact
					</a>
				</li>
				<li class="mt-4 md:mt-0 md:pl-3">
					<a href="/post/5500" class="text-gray-500 hover:text-gray-400">
						Welcome Guide
					</a>
				</li>
				<li class="mt-4 md:mt-0 md:pl-3">
					<a href="/rules" class="text-gray-500 hover:text-gray-400">
						Community Etiquette
					</a>
				</li>
				<li class="mt-4 md:mt-0 md:pl-3">
					<a href="/changelog" class="text-gray-500 hover:text-gray-400">
						Changelog
					</a>
				</li>
				<li class="mt-4 md:mt-0 md:pl-3">
					<a href="https://github.com/Aevann1/Drama" class="text-gray-500 hover:text-gray-400">
						GitHub
					</a>
				</li>
			</ul>
		</div>
		<div class="w-full mt-4 px-4 text-sm text-gray-600">
			<div class="flex flex-col md:flex-row justify-between pt-4 shadow-inset-t-white-05 border-t border-gray-900 leading-none">
				<small>©2021 Copyright rdrama.net</small>
				<small class="hidden md:block">Deus, rex, et bussy</small>
			</div>
		</div>
	</div>
</div>