How to design a collapse component in reactjs with tailwind css

Question

I am trying to create a collapse section component design in react JS with TailwindCSS, in the component, there will be an edit button to open and close the info section, and the edit info button will be next to the input field. The design is done(screenshot 1) but some adjustments are needed in the styling, which causes confusion about how to put the edit info button and info section code in a single component so that the design looks like the below screenshot.

    <div>
      <div
        className={[
          'flex',
          'justify-between',
          'relative',
          'lg:px-20',
          'xl:px-40',
          'py-6',
        ].join(' ')}
      >
        <div className="flex items-center sm:flex-col lg:flex-row ">
          <div className="flex flex-col lg:flex-row md:flex-row items-center">
            <StreamTokenInputField />
//EDIT INFO BUTTON
            <button
              className="button"
              onClick={() => setIsCollapseTrue(!isCollapseTrue)}
            >
              {i18n.t(Edit Info)}
              {isCollapseTrue ? (
                <IoIosArrowUp className="font-extrabold ml-2 text-lg" />
              ) : (
                <FiChevronDown className="font-extrabold ml-2 text-lg" />
              )}
            </button>
          </div>
        </div>
      </div>
// INFO SECTION
      <div
        className={[
          'container',
          'mx-auto',
          'md:w-full',
          'w-96',
          'py-8',
          'my-4',
          'lg:py-20',
          'lg:px-40',
          'bg-skin-card',
          'rounded-3xl',
          !isCollapseTrue && 'hidden',
        ].join(' ')}
      >
        {/* OTHER CODES */}
      </div>

    </div>

screenshot 1

I have tried like this

      <div
        className={[
          'flex',
          'justify-between',
          'relative',
          'lg:px-20',
          'xl:px-40',
          'py-6',
        ].join(' ')}
      >
        <div className="flex items-center sm:flex-col lg:flex-row ">
          <div className="flex flex-col lg:flex-row md:flex-row items-center">
            <StreamTokenInputField />
            <button
              className={[
                'flex',
                'button',
                'button-green',
                'xl:px-6',
                'md:px-2',
                'lg:px-10',
                'lg:my-6',
                'md:my-6',
                'mx-4',
                'justify-center',
                'uppercase',
                'font-semibold',
              ].join(' ')}
              onClick={() => setIsCollapseTrue(!isCollapseTrue)}
            >
              {i18n.t(buttonName)}
              {isCollapseTrue ? (
                <IoIosArrowUp className="font-extrabold ml-2 text-lg" />
              ) : (
                <FiChevronDown className="font-extrabold ml-2 text-lg" />
              )}
            </button>
            <div
              className={[
                'container',
                'mx-auto',
                'md:w-full',
                'w-96',
                'py-8',
                'my-4',
                'lg:py-20',
                'lg:px-40',
                'bg-skin-card',
                'rounded-3xl',
                !isCollapseTrue && 'hidden',
              ].join(' ')}
            >
              {/* OTHER CODES */}
            </div>
          </div>
        </div>
      </div>

However, the output shows like this: I want the info section to appear below the edit info button just like in the screenshot above.

Answer 1

If you want info section appear below button. You don't need lg:flex-row So your code will be

<div className="flex items-center flex-col">
[...]
</div>

Also tailwind uses mobile-first breakpoint system. So you don't need to add sm: to sm:flex-col .

Same here <div className="flex flex-col lg:flex-row md:flex-row items-center"> . You don't need to add lg:flex-row once you added md:flex-row . Any larger size than md will follow same class defined as md:

More information can be found here mobile-first-breakpoint-system

Answer 2

You can make use of the detail tag. Modify the animation anyhow you want or perhaps hide the default icon and specify a custom icon.

<details className="open:bg-white border-b  open:ring-1 open:ring-black/5 open:shadow-lg p-6 rounded-lg transform-gpu delay-75 duration-100 ease-in-out ">
   <summary className="leading-6 text-slate-900 dark:text-white font-semibold select-none">
       Why do they call it Ovaltine?
   </summary>
   <div className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
       <p>The mug is round. The jar is round. They should call it Roundtine.</p>
   </div>
</details>