<div class="bg-gray-100">
<div class="container mx-auto flex flex-col px-4">
<p class="text-gray-400 uppercase font-semibold tracking-wider mt-16 text-center">Have something in mind?</p>
<h3 class="text-gray-800 font-black text-3xl mt-2 text-center">Frequently Asked Questions</h3>
<div class="py-8 grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">What do you think your life will be like in the future?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">If you could be a sound, what would it be?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">What is the funniest thing ever happened to you?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">What do you think your life will be like in the future?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">What is the wonderful thing ever happened to you?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">Who is your best friend and why?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">If you could choose a new name for yourself, what would it be, and why?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
</div>
</div>
<div>
<h3 class="font-bold text-gray-700 py-4 cursor-pointer">What is the coolest thing you saw someone do today?</h3>
<div class="h-auto transition-height duration-500 ease-in-out">
<p class="text-gray-500 leading-6 py-4">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
</div>
</div>
</div>
</div>
</div>
const FAQ = () => {
return (
<div className="bg-gray-100">
<div className="container mx-auto flex flex-col px-4">
<p className="text-gray-400 uppercase font-semibold tracking-wider mt-16 text-center">
Have something in mind?
</p>
<h3 className="text-gray-800 font-black text-3xl mt-2 text-center">
Frequently Asked Questions
</h3>
<div className="py-8 grid grid-cols-1 md:grid-cols-2 gap-3">
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
What do you think your life will be like in the
future?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec
suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu
ante scelerisque vulputate.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
If you could be a sound, what would it be?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Sed non urna. Donec et ante. Phasellus eu
ligula. Vestibulum sit amet purus. Vivamus
hendrerit, dolor at aliquet laoreet, mauris
turpis porttitor velit, faucibus interdum tellus
libero ac justo. Vivamus non quam. In suscipit
faucibus urna.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
What is the funniest thing ever happened to you?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Nam enim risus, molestie et, porta ac, aliquam
ac, risus. Quisque lobortis. Phasellus
pellentesque purus in massa. Aenean in pede.
Phasellus ac libero ac tellus pellentesque
semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu
iaculis leo purus venenatis dui.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
What do you think your life will be like in the
future?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Cras dictum. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere
cubilia Curae; Aenean lacinia mauris vel est.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
What is the wonderful thing ever happened to you?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec
suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu
ante scelerisque vulputate.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
Who is your best friend and why?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Sed non urna. Donec et ante. Phasellus eu
ligula. Vestibulum sit amet purus. Vivamus
hendrerit, dolor at aliquet laoreet, mauris
turpis porttitor velit, faucibus interdum tellus
libero ac justo. Vivamus non quam. In suscipit
faucibus urna.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
If you could choose a new name for yourself, what
would it be, and why?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Nam enim risus, molestie et, porta ac, aliquam
ac, risus. Quisque lobortis. Phasellus
pellentesque purus in massa. Aenean in pede.
Phasellus ac libero ac tellus pellentesque
semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu
iaculis leo purus venenatis dui.
</p>
</div>
</div>
<div>
<h3 className="font-bold text-gray-700 py-4 cursor-pointer">
What is the coolest thing you saw someone do today?
</h3>
<div className="h-auto transition-height duration-500 ease-in-out">
<p className="text-gray-500 leading-6 py-4">
Cras dictum. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames
ac turpis egestas. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere
cubilia Curae; Aenean lacinia mauris vel est.
</p>
</div>
</div>
</div>
</div>
</div>
);
}
export default FAQ;