tailwindcss实现手风琴折叠卡片消息代码-html代码-BFW代码库

tailwindcss实现手风琴折叠卡片消息代码

代码语言：html

代码描述：tailwindcss实现手风琴折叠卡片消息代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  


</head>

<body  >
  <section class="w-screen min-h-screen py-6 px-12 flex flex-col bg-zinc-900 text-zinc-50 items-center justify-center">
	<div class="w-full flex flex-col gap-3 max-w-screen-md">
		<!-- FAQ 1 Start-->
		<div class="w-full rounded bg-zinc-800 hover:bg-zinc-700">
			<div class="flex flex-col">
				<input id="faq1" type="checkbox" class="ml-auto sr-only peer">
				<label for="faq1" class="flex py-2 px-4 mt-2 w-full items-center cursor-pointer">
					<span class="font-medium text-lg">What is the meaning of life, the universe, and everything?</span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-auto">
					  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
					</svg>
				</label>
				<div class="grid grid-rows-[0fr] mt-2 overflow-hidden transition-all duration-500 peer-checked:grid-rows-[1fr]">
					<div class="min-h-[0] px-4">
						<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
					</div> 
				</div>
			</div>
		</div>
		<!-- FAQ 1 End-->
		<!-- FAQ 2 Start-->
		<div class="w-full rounded bg-zinc-800 hover:bg-zinc-700">
			<div class="flex flex-col">
				<input id="faq2" type="checkbox" class="ml-auto sr-only peer">
				<label for="faq2" class="flex py-2 px-4 mt-2 w-full items-center cursor-pointer">
					<span class="font-medium text-lg">What is the average airspeed of an unladen swallow?</span>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-auto">
					  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
					</svg>
				</label>
				<div class="grid grid-rows-[0fr] mt-2 overflow-hidden transition-all duration-500 peer-checked:grid-rows-[1fr]">
					<div class="min-h-[0] px-4">
						<p class="mb-2 text-zinc-200 font-light pr-6">Pellentesque habitant morbi tristique senectus .........完整代码请登录后点击上方下载按钮下载查看