Basic example

Responsive Collapse built with Tailwind CSS. Collapse is a vertically collapsing element that allows you to show and hide information.

Basic example 
<div data-tb-collapse>
    <button
        class="btn bg-blue-600/90 text-white hover:bg-blue-600"
        type="button"
        data-tb-collapse-toggle="#collapse-basic-1"
        aria-expanded="true"
    >
        Click to show/hide
    </button>
    <div id="collapse-basic-1" class="hidden" data-tb-collapse-item>
        <div class="pt-5">
            Aliquip incididunt pariatur fugiat non velit velit. Reprehenderit laboris fugiat Lorem velit est esse magna est mollit
            consequat dolore laboris. Adipisicing ex quis duis consequat consectetur elit ullamco cupidatat exercitation. Aute in
            occaecat dolor ut nulla ad deserunt. Reprehenderit mollit sunt sit consectetur exercitation ullamco aliqua et nostrud aliqua
            mollit. Labore non culpa nostrud velit laborum Lorem et eiusmod laboris id tempor reprehenderit voluptate exercitation. Esse
            aute consectetur commodo adipisicing nisi consectetur aliquip consectetur aliquip ea ex nulla quis.
        </div>
    </div>
</div>

Multiple triggers

You can use multiple trigger elements to hide/show the collapse content.

Multiple triggers 
<div data-tb-collapse>
    <button
        class="btn mr-2 bg-blue-600/90 text-white hover:bg-blue-600"
        type="button"
        data-tb-collapse-toggle="#collapse-basic-2"
        aria-expanded="true"
    >
        Trigger 1
    </button>

    <button
        class="btn mr-2 bg-blue-600/90 text-white hover:bg-blue-600"
        type="button"
        data-tb-collapse-toggle="#collapse-basic-2"
        aria-expanded="true"
    >
        Trigger 2
    </button>

    <button
        class="btn mr-2 bg-blue-600/90 text-white hover:bg-blue-600"
        type="button"
        data-tb-collapse-toggle="#collapse-basic-2"
        aria-expanded="true"
    >
        Trigger 3
    </button>

    <div id="collapse-basic-2" class="hidden" data-tb-collapse-item>
        <div class="pt-5">
            Aliquip incididunt pariatur fugiat non velit velit. Reprehenderit laboris fugiat Lorem velit est esse magna est mollit
            consequat dolore laboris. Adipisicing ex quis duis consequat consectetur elit ullamco cupidatat exercitation. Aute in
            occaecat dolor ut nulla ad deserunt. Reprehenderit mollit sunt sit consectetur exercitation ullamco aliqua et nostrud aliqua
            mollit. Labore non culpa nostrud velit laborum Lorem et eiusmod laboris id tempor reprehenderit voluptate exercitation. Esse
            aute consectetur commodo adipisicing nisi consectetur aliquip consectetur aliquip ea ex nulla quis.
        </div>
    </div>
</div>

Visible content

Make the collapse content visible by default by removing the hidden class from the collapse.

Visible content 
<div data-tb-collapse>
    <button
        class="btn bg-blue-600/90 text-white hover:bg-blue-600"
        type="button"
        data-tb-collapse-toggle="#collapse-basic-3"
        aria-expanded="true"
    >
        Click to show/hide
    </button>
    <div id="collapse-basic-3" data-tb-collapse-item>
        <div class="pt-5">
            Aliquip incididunt pariatur fugiat non velit velit. Reprehenderit laboris fugiat Lorem velit est esse magna est mollit
            consequat dolore laboris. Adipisicing ex quis duis consequat consectetur elit ullamco cupidatat exercitation. Aute in
            occaecat dolor ut nulla ad deserunt. Reprehenderit mollit sunt sit consectetur exercitation ullamco aliqua et nostrud aliqua
            mollit. Labore non culpa nostrud velit laborum Lorem et eiusmod laboris id tempor reprehenderit voluptate exercitation. Esse
            aute consectetur commodo adipisicing nisi consectetur aliquip consectetur aliquip ea ex nulla quis.
        </div>
    </div>
</div>