<body class='bg-blue-600' <section class='w-full'>
	<div class='card absolute top-1/2 left-1/2 transform -translate-y-2/4 -translate-x-2/4 bg-blue-100 rounded-lg shadow-xl'>
		<h3 class='px-4 py-8 text-black text-2xl uppercase font-bold'>Frequently Asked Questions</h3>
		<div>
			<div class='card p-4'>
				<details class='transition duration-500 bg-indigo-200	cursor-pointer p-8 border-solid border-l-8 border-indigo-400 rounded-md hover:bg-indigo-400'>
					<summary class='flex items-center justify-space-between focus:outline-none'>
						<header class='flex justify-center items-center'>
							<svg class='w-10 h-10' viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M32.6066 22H11.3934" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
								<path d="M22 11.3934V32.6066" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
							<h1 class='leading-5 flex self-center text-black text-xl'>Is a hotdog a sandwich? Why or why not?</h1>
						</header>
					</summary>
					<div class='content ml-10 text-lg'>
						<p>A sandwich is "two or more slices of bread or a split roll having a filling in between." By that definition, hot dogs seem to qualify as sandwiches. ... It's just culturally not the same as a sandwich.</p>
					</div>
				</details>
			</div>
			<div class='card p-4'>
				<details class='transition duration-500 bg-yellow-200	hover:bg-yellow-400 cursor-pointer p-8 border-solid border-l-8 border-yellow-400 rounded-md'>
					<summary class='flex items-center justify-space-between focus:outline-none'>
						<header class='flex justify-center items-center'>
							<svg class='w-10 h-10' viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M32.6066 22H11.3934" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
								<path d="M22 11.3934V32.6066" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
							<h1 class='leading-5 flex self-center text-black text-xl'>What’s the best Wi-Fi name you’ve seen?</h1>
						</header>
					</summary>
					<div class='content ml-10 text-lg'>
						<ul class='list-disc p-4'>
							<li>Mom Use This One</li>
							<li>I Now Declare You Husband and Wi-Fi</li>
							<li>Benjamin FrankLAN</li>
							<li>Martin Router King</li>
						</ul>
					</div>
				</details>
			</div>
			<div class='card p-4'>
				<details class='transition duration-500 bg-pink-200	hover:bg-pink-400 cursor-pointer p-8 border-solid border-l-8 border-pink-400 rounded-md'>
					<summary class='flex items-center justify-space-between focus:outline-none'>
						<header class='flex justify-center items-center'>
							<svg class='w-10 h-10' viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M32.6066 22H11.3934" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
								<path d="M22 11.3934V32.6066" stroke="#202842" stroke-width="1.875" stroke-linecap="round" stroke-linejoin="round" />
							</svg>
							<h1 class='leading-5 flex self-center text-black text-xl'>What’s invisible but you wish people could see?
							</h1>
						</header>
					</summary>
					<div class='content ml-10 text-lg'>
						<p>Sexually transmitted diseases.</p>
						<img class='w-16' src="https://images.vexels.com/media/users/3/143597/isolated/preview/0626994ef7a02a13ab0f7912889ece0e-lol-meme-face.png" />
					</div>
				</details>
			</div>
		</div>
	</div>
	</section>
</body>
// fonts
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

body {
	> * {
		font-family: "IBM Plex Sans", sans-serif;
	}
}

summary {
	min-width: 30rem;

	header > svg {
		transform: scale(1) rotate(0deg);
		transition: 0.5s;
	}
}

details summary::-webkit-details-marker {
	display: none;
}

details[open] {
	transition: 0.5s;
	transform-origin: center center;
	transform-box: fill-box;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	summary {
		header > svg {
			transform: scale(1) rotate(45deg);
			transition: 0.5s;
		}

		header > h1 {
			font-weight: bold;
		}

		&::marker {
			display: none;
		}

		&:focus {
			outline: none;
		}
	}
}

.content {
	> p {
		margin: 1rem 0;
	}
}

details[open] summary ~ * {
	animation: sweep 0.5s ease-in-out;
}

// better for performance reasons
@keyframes sweep {
	0% {
		opacity: 0;
		transform: translateX(-2.5rem);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.17/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.