Here is an example of how you might create an accordion using Tailwind CSS:

<div class="relative">
    <button
        class="relative z-10 block w-full rounded-t-md font-medium text-left focus:outline-none focus:shadow-outline-primary focus:border-primary-dark transition duration-150 ease-in-out"
        type="button">
        <span class="block px-4 py-2 leading-5 text-gray-900">Section 1</span>
        <span class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">
      <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
           viewBox="0 0 24 24" stroke="currentColor">
        <path d="M19 9l-7 7-7-7"></path>
      </svg>
    </span>
    </button>
    <div class="relative px-4 py-3 border-t-2 border-gray-300">
        <p class="text-base leading-6 text-gray-700">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.
        </p>
    </div>
</div>

This will create a single section of an accordion. The button element serves as the toggle for the accordion section, and the div element below it contains the content that will be shown or hidden when the toggle is clicked.

The relative class is used to position the toggle and content relative to each other, and the z-10 class gives the toggle a higher stacking order so that it appears above the content when the accordion is expanded. The rounded-t-md class rounds the top corners of the toggle, and the transition duration-150 ease-in-out class adds a smooth transition effect when the toggle is clicked.

To create multiple sections in the accordion, you can simply add additional pairs of toggle and content elements. You may also want to use JavaScript to handle the toggling behavior, such as by showing and hiding the content elements when the toggle is clicked.

other example

Here’s an example of an accordion style using Tailwind CSS:

<style>
    .accordion {
        --bg-color: #fff;
        --text-color: #000;
        --border-color: #dcdcdc;
    }

    .accordion__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 0.75rem 1.25rem;
        background-color: var(--bg-color);
        color: var(--text-color);
        border: 1px solid var(--border-color);
    }

    .accordion__header:hover {
        background-color: #f8f8f8;
    }

    .accordion__header:focus {
        outline: 0;
    }

    .accordion__header .accordion__indicator {
        display: inline-block;
        width: 1em;
        height: 1em;
        margin-left: 0.25em;
        vertical-align: middle;
        border-left: 0.125em solid currentColor;
        border-top: 0.125em solid currentColor;
        transform: rotate(45deg);
    }

    .accordion__header[aria-expanded="true"] .accordion__indicator {
        transform: rotate(-135deg);
    }

    .accordion__panel {
        overflow: hidden;
        height: 0;
        transition: height 0.5s ease-out;
    }

    .accordion__panel[aria-hidden="false"] {
        height: auto;
    }
</style>

<div class="accordion" role="presentation">
    <h3 class="accordion__header" role="button" aria-expanded="false">
        Accordion header
        <span class="accordion__indicator"></span>
    </h3>
    <div class="accordion__panel" aria-hidden="true">
        <p>Accordion panel content goes here...</p>
    </div>
</div>

This creates an accordion style where the accordion header can be clicked to toggle the visibility of the accordion panel. The accordion header has a hover effect, and the accordion panel has a smooth transition when it is opened or closed. The appearance of the accordion can be customized using the CSS variables at the top of the styles.