After create the project with Next.js, install the headless ui and tailwind CSS.

npm install @headlessui/react

At the root folder, create a folder named “components”.

Inside the folder, create “MyDisclosure.js”.

import React from 'react'import { Disclosure } from '@headlessui/react'const MyDisclosure = () => {return (<div className="w-full px-4 pt-16"><div className="mx-auto w-full max-w-md rounded-2xl bg-white p-2"><Disclosure><Disclosure.Button className="flex w-full justify-between rounded-lg bg-purple-100 px-4 py-2 text-left text-sm font-medium text-purple-900 hover:bg-purple-200 focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75">Is team pricing available?</Disclosure.Button><Disclosure.Panel className="px-4 pt-4 pb-2 text-sm text-gray-500">Yes! You can purchase a license that you can share with your entireteam.</Disclosure.Panel></Disclosure></div></div>)}export default MyDisclosure

At the index.js, import MyDisclosure

import MyDisclosure from '../components/MyDisclosure'export default function Home() {return (<div className="bg-violet-300 h-screen"><MyDisclosure/></div>)}

If you liked this story, you might also like a Medium membership. It’s only $5 a month (a price of a cup of coffee!) but it will give you unlimited access to stories while supporting your favorite writers. If you sign up using this link, I’ll earn a small commission. Thanks!

Follow us: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.