Developer-Friendly Tailwind Application Components

Frequently Asked Questions

<div class="mx-auto mt-32 h-screen max-w-5xl px-2 py-3 tracking-wide md:mt-44 md:px-4">
  
  <h2 class="flex justify-center text-3xl">Frequently Asked Questions</h2>

<div class="grid gap-3 py-8 text-lg leading-6 text-gray-800 md:grid-cols-2 md:gap-8">
    <div class="space-y-3">
      
      <div x-data="accordion(1)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-data ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Declare a new Alpine component and its data for a block of HTML</div>
        </div>
      </div>

<div x-data="accordion(2)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-bind ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Dynamically set HTML attributes on an element.</div>
        </div>
      </div>
      
    </div>

<div class="space-y-3">
      
      <div x-data="accordion(3)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is $store ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Access a global store registered using Alpine.store(...)</div>
        </div>
      </div>

<div x-data="accordion(4)" class="relative rounded-xl border transition-all duration-700 hover:shadow-2xl">
        <div @click="handleClick()" class="w-full cursor-pointer p-4 text-left">
          <div class="flex items-center justify-between">
            <span class="tracking-wide">What is x-on ?</span>
            <span :class="handleRotate()" class="transform fill-current transition-transform duration-500">
              <i class="fa-solid fa-chevron-down h-5 w-5 fill-current"></i>
            </span>
          </div>
        </div>

<div x-ref="tab" :style="handleToggle()" class="relative max-h-0 overflow-hidden transition-all duration-700">
          <div class="px-6 pb-4 text-gray-600">Listen for browser events on an element</div>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Alpine.data("accordion", (idx) => ({
      init() {
      this.idx = idx;
      },
      idx: -1,
      handleClick() {
      this.$store.accordion.tab =
          this.$store.accordion.tab === this.idx ? 0 : this.idx;
      },
      handleRotate() {
      return this.$store.accordion.tab === this.idx ? "-rotate-180" : "";
      },
      handleToggle() {
      return this.$store.accordion.tab === this.idx
          ? `max-height: ${this.$refs.tab.scrollHeight}px`
          : "";
      }
  }));
  });
  //  end faq
</script>

<js-component src="application/frequently_asked_questions"></js-component>

Card Link

View

Image Link

View

Line Height

View

Letter Spacing

View

Text Underline

View

Font Weight

View

Paragraph Link

View

Link Button

View

Default Link

View

Blockquote Sizes

View

Blockquote Center

View

Blockquote Left

View

Blockquote Right

View

User Review Blockquote

View

<div class="flex w-full flex-col">
  <figure class="max-w-screen-md">
    <div class="mb-4 flex items-center text-yellow-300">
      <svg class="me-1 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
      </svg>
      <svg class="me-1 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
      </svg>
      <svg class="me-1 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
      </svg>
      <svg class="me-1 h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
      </svg>
      <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
        <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" />
      </svg>
    </div>
    <blockquote>
      <p class="text-2xl font-semibold text-gray-900">"Jamstaker is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
    </blockquote>
    <figcaption class="mt-6 flex items-center space-x-3 rtl:space-x-reverse">
      <img class="h-6 w-6 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png" alt="profile picture" />
      <div class="flex items-center divide-x-2 divide-gray-300 rtl:divide-x-reverse">
        <cite class="pe-3 font-medium text-gray-900">YOUR NAME</cite>
        <cite class="ps-3 text-sm text-gray-500">CTO at Jamstaker</cite>
      </div>
    </figcaption>
  </figure>
</div>

<js-component src="application/user_review_blockquote"></js-component>

Range Labels

View

Range Sizes

View

Steps

View

Min and Max Range

View

Disabled Range

View

Alert Additional Content

View

<div class="flex w-full flex-col">
  <div x-data="{open :true}" x-show="open" id="alert-additional-content-1" class="mb-4 rounded-lg border border-blue-300 bg-blue-50 p-4 text-blue-800" role="alert">
    <div class="flex items-center">
      <svg class="me-2 h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
      <h3 class="text-lg font-medium">This is a info alert</h3>
    </div>
    <div class="mb-4 mt-2 text-sm">More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
    <div class="flex">
      <button type="button" class="me-2 inline-flex items-center rounded-lg bg-blue-800 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-200">
        <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
        </svg>
        View more
      </button>
      <button @click="open = false" type="button" class="rounded-lg border border-blue-800 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-blue-800 hover:bg-blue-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-200" data-dismiss-target="#alert-additional-content-1" aria-label="Close">Dismiss</button>
    </div>
  </div>
  <div x-data="{open :true}" x-show="open" id="alert-additional-content-2" class="mb-4 rounded-lg border border-red-300 bg-red-50 p-4 text-red-800" role="alert">
    <div class="flex items-center">
      <svg class="me-2 h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
      <h3 class="text-lg font-medium">This is a danger alert</h3>
    </div>
    <div class="mb-4 mt-2 text-sm">More info about this info danger goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
    <div class="flex">
      <button type="button" class="me-2 inline-flex items-center rounded-lg bg-red-800 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-red-900 focus:outline-none focus:ring-4 focus:ring-red-300">
        <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
        </svg>
        View more
      </button>
      <button @click="open = false" type="button" class="rounded-lg border border-red-800 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-red-800 hover:bg-red-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-red-300" data-dismiss-target="#alert-additional-content-2" aria-label="Close">Dismiss</button>
    </div>
  </div>
  <div x-data="{open :true}" x-show="open" id="alert-additional-content-3" class="mb-4 rounded-lg border border-green-300 bg-green-50 p-4 text-green-800" role="alert">
    <div class="flex items-center">
      <svg class="me-2 h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
      <h3 class="text-lg font-medium">This is a success alert</h3>
    </div>
    <div class="mb-4 mt-2 text-sm">More info about this info success goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
    <div class="flex">
      <button type="button" class="me-2 inline-flex items-center rounded-lg bg-green-800 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-green-900 focus:outline-none focus:ring-4 focus:ring-green-300">
        <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
        </svg>
        View more
      </button>
      <button @click="open = false" type="button" class="rounded-lg border border-green-800 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-green-800 hover:bg-green-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-green-300" data-dismiss-target="#alert-additional-content-3" aria-label="Close">Dismiss</button>
    </div>
  </div>
  <div x-data="{open :true}" x-show="open" id="alert-additional-content-4" class="mb-4 rounded-lg border border-yellow-300 bg-yellow-50 p-4 text-yellow-800" role="alert">
    <div class="flex items-center">
      <svg class="me-2 h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
      <h3 class="text-lg font-medium">This is a warning alert</h3>
    </div>
    <div class="mb-4 mt-2 text-sm">More info about this info warning goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
    <div class="flex">
      <button type="button" class="me-2 inline-flex items-center rounded-lg bg-yellow-800 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-yellow-900 focus:outline-none focus:ring-4 focus:ring-yellow-300">
        <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
        </svg>
        View more
      </button>
      <button @click="open = false" type="button" class="rounded-lg border border-yellow-800 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-yellow-800 hover:bg-yellow-900 hover:text-white focus:outline-none focus:ring-4 focus:ring-yellow-300" data-dismiss-target="#alert-additional-content-4" aria-label="Close">Dismiss</button>
    </div>
  </div>
  <div x-data="{open :true}" x-show="open" id="alert-additional-content-5" class="rounded-lg border border-gray-300 bg-gray-50 p-4" role="alert">
    <div class="flex items-center">
      <svg class="me-2 h-4 w-4 flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Info</span>
      <h3 class="text-lg font-medium text-gray-800">This is a dark alert</h3>
    </div>
    <div class="mb-4 mt-2 text-sm text-gray-800">More info about this info dark goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</div>
    <div class="flex">
      <button type="button" class="me-2 inline-flex items-center rounded-lg bg-gray-700 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300">
        <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
          <path d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z" />
        </svg>
        View more
      </button>
      <button @click="open = false" type="button" class="rounded-lg border border-gray-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-gray-800 hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-gray-300" data-dismiss-target="#alert-additional-content-5" aria-label="Close">Dismiss</button>
    </div>
  </div>
</div>

<js-component src="application/alert_additional_content"></js-component>

Alert With List

View

Default Accordion

View

<div class="flex w-full flex-col" id="accordion-collapse" data-accordion="collapse">
  <div x-data="{open : false}" class="w-full">
    <h2 id="accordion-collapse-heading-1 w-full">
      <button @click="open = !open" type="button" class="flex w-full items-center justify-between gap-3 rounded-t-xl border border-b-0 border-gray-200 p-5 font-medium text-gray-500 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
        <span>What is Jamstacker?</span>
        <svg data-accordion-icon class="h-3 w-3 shrink-0 rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
        </svg>
      </button>
    </h2>
    <div x-show="open" id="accordion-collapse-body-1" aria-labelledby="accordion-collapse-heading-1">
      <div class="w-full border border-b-0 border-gray-200 p-5">
        <p class="mb-2 text-gray-500">Jamstacker is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
        <p class="text-gray-500">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-blue-600 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
      </div>
    </div>
  </div>
  <div x-data="{open : false} " class="w-full">
    <h2 id="accordion-collapse-heading-2">
      <button @click="open=!open" type="button" class="flex w-full items-center justify-between gap-3 border border-b-0 border-gray-200 p-5 font-medium text-gray-500 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
        <span>Is there a Figma file available?</span>
        <svg data-accordion-icon class="h-3 w-3 shrink-0 rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
        </svg>
      </button>
    </h2>
    <div x-show="open" id="accordion-collapse-body-2" aria-labelledby="accordion-collapse-heading-2">
      <div class="w-full border border-b-0 border-gray-200 p-5">
        <p class="mb-2 text-gray-500">Jamstacker is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
        <p class="text-gray-500">Check out the <a href="https://beta.jamstackers.com/" class="text-blue-600 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Jamstacker.</p>
      </div>
    </div>
  </div>
  <div x-data="{open:false}" class="w-full">
    <h2 id="accordion-collapse-heading-3">
      <button @click="open=!open" type="button" class="flex w-full items-center justify-between gap-3 border border-gray-200 p-5 font-medium text-gray-500 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
        <span>What are the differences between Jamstacker and Tailwind UI?</span>
        <svg data-accordion-icon class="h-3 w-3 shrink-0 rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
        </svg>
      </button>
    </h2>
    <div x-show="open" id="accordion-collapse-body-3" aria-labelledby="accordion-collapse-heading-3">
      <div class="w-full border border-t-0 border-gray-200 p-5">
        <p class="mb-2 text-gray-500">The main difference is that the core components from Jamstacker are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Jamstacker relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
        <p class="mb-2 text-gray-500">However, we actually recommend using both Jamstacker, Jamstacker Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
        <p class="mb-2 text-gray-500">Learn more about these technologies:</p>
        <ul class="list-disc ps-5 text-gray-500">
          <li><a href="https://Jamstacker.com/pro/" class="text-blue-600 hover:underline">Jamstacker Pro</a></li>
          <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 hover:underline">Tailwind UI</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<js-component src="application/default_accordion"></js-component>

Arrow Style Accordion

View

<div class="flex w-full flex-col">
  <div id="accordion-arrow-icon" data-accordion="open">
    <div x-data="{open:false}">
      <h2 id="accordion-arrow-icon-heading-1">
        <button @click="open = !open" type="button" class="flex w-full items-center justify-between gap-3 rounded-t-xl border border-b-0 border-gray-200 bg-gray-100 p-5 font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-arrow-icon-body-1" aria-expanded="true" aria-controls="accordion-arrow-icon-body-1">
          <span>Accordion without an arrow</span>
        </button>
      </h2>
      <div x-show="open" id="accordion-arrow-icon-body-1" aria-labelledby="accordion-arrow-icon-heading-1">
        <div class="border border-b-0 border-gray-200 p-5">
          <p class="mb-2 text-gray-500">Jamstacker is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
          <p class="text-gray-500">Check out this guide to learn how to <a href="#" class="text-blue-600 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
        </div>
      </div>
    </div>
    <div x-data="{open : false}">
      <h2 id="accordion-arrow-icon-heading-2">
        <button @click="open =!open" type="button" class="flex w-full items-center justify-between gap-3 border border-b-0 border-gray-200 p-5 font-medium text-gray-500 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-arrow-icon-body-2" aria-expanded="false" aria-controls="accordion-arrow-icon-body-2">
          <span>Accordion with another icon</span>
          <svg class="-me-0.5 h-4 w-4 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.529 7.988a2.502 2.502 0 0 1 5 .191A2.441 2.441 0 0 1 10 10.582V12m-.01 3.008H10M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
          </svg>
        </button>
      </h2>
      <div x-show="open" id="accordion-arrow-icon-body-2" aria-labelledby="accordion-arrow-icon-heading-2">
        <div class="border border-b-0 border-gray-200 p-5">
          <p class="mb-2 text-gray-500">Jamstacker is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
          <p class="text-gray-500">Check out the <a href="https://jamstacker.com/figma/" class="text-blue-600 hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Jamstacker.</p>
        </div>
      </div>
    </div>
    <div x-data="{open: false}">
      <h2 id="accordion-arrow-icon-heading-3">
        <button @click="open=!open" type="button" class="flex w-full items-center justify-between gap-3 border border-gray-200 p-5 font-medium text-gray-500 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 rtl:text-right" data-accordion-target="#accordion-arrow-icon-body-3" aria-expanded="false" aria-controls="accordion-arrow-icon-body-3">
          <span>Accordion without arrow rotation</span>
          <svg data-accordion-icon class="h-3 w-3 shrink-0 rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
          </svg>
        </button>
      </h2>
      <div x-show="open" id="accordion-arrow-icon-body-3" aria-labelledby="accordion-arrow-icon-heading-3">
        <div class="border border-t-0 border-gray-200 p-5">
          <p class="mb-2 text-gray-500">The main difference is that the core components from Jamstacker are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Jamstacker relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
          <p class="mb-2 text-gray-500">However, we actually recommend using both Jamstacker, Jamstacker Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
          <p class="mb-2 text-gray-500">Learn more about these technologies:</p>
          <ul class="list-disc ps-5 text-gray-500">
            <li><a href="https://jamstacker.com/pro/" class="text-blue-600 hover:underline">Jamstacker Pro</a></li>
            <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 hover:underline">Tailwind UI</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="application/arrow_style_accordion"></js-component>

Search Bar

View

Progress Bar

View

Accordion

View

Card Component

View

Frequently Asked Questions

Card Link

Image Link

Line Height

Letter Spacing

Text Underline

Font Weight

Font Size

Paragraph Link

Link Button

Default Link

Blockquote Sizes

Blockquote Center

Blockquote Left

Blockquote Right

User Review Blockquote

Range Labels

Range Sizes

Steps

Min and Max Range

Disabled Range

Alert Additional Content

Alert With List

Default Accordion

Arrow Style Accordion

Search Bar

Progress Bar

Accordion

Card Component