<div class="flex justify-center items-center w-screen min-h-screen p-10">

	<!-- Component Start -->
	<div class="flex flex-col w-56">
		<button class="group border-t border-r border-l border-black focus:outline-none">
			<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
				<span class="truncate">Heading One</span>
				<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
					<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
				</svg>
			</div>
			<div class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
			</div>
		</button>
		<button class="group border-t border-r border-l  border-black focus:outline-none">
			<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
				<span class="truncate">Heading Two</span>
				<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
					<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
				</svg>
			</div>
			<div class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
			</div>
		</button>
		<button class="group border border-black focus:outline-none">
			<div class="flex items-center justify-between h-12 px-3 font-semibold hover:bg-gray-200">
				<span class="truncate">Heading Three</span>
				<svg class="h-4 w-4 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
					<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
				</svg>
			</div>
			<div class="max-h-0 overflow-hidden duration-300 group-focus:max-h-40">
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item A</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item B</a>
				<a class="flex items-center h-8 px-4 text-sm hover:bg-gray-200" href="#">Item C</a>
			</div>
		</button>
	</div>
	<!-- Component End  -->

</div>

<a class="fixed flex items-center justify-center h-8 pr-2 pl-1 bg-blue-600 rounded-full bottom-0 right-0 mr-4 mb-4 shadow-lg text-blue-100 hover:bg-blue-600" href="https://twitter.com/lofiui" target="_top">
	<div class="flex items-center justify-center h-6 w-6 bg-blue-500 rounded-full">
		<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24" class="r-jwli3a r-4qtqp9 r-yyyyoo r-16y2uox r-1q142lx r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1srniue"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>
	</div>
	<span class="text-sm ml-1 leading-none">@lofiui</span>
</a>

.max-h-0 {
	max-height: 0;
}

.group:focus .group-focus\:max-h-40 {
	max-height: 10rem;
}