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

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

Image Link

View

<div x-data="{currentYear: new Date().getFullYear()}" class="max-w-sm rounded-lg border border-gray-200 bg-white shadow-md">
  <a href="#">
    <img class="rounded-t-lg" src="https://picsum.photos/500/300" alt="image 1" />
  </a>
  <div class="p-5">
    <a href="#">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Jamstacker technology acquisitions <span x-text="currentYear"></span></h5>
    </a>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of <span x-text="currentYear"></span> so far, in reverse chronological order.</p>
    <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
      Read more
      <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
      </svg>
    </a>
  </div>
</div>

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

Line Height

View

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

Letter Spacing

View

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

Text Underline

View

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

Font Weight

View

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

Paragraph Link

View

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

Link Button

View

<js-component src="ecommerce/link_button"></js-component>

Default Link

View

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

Blockquote Sizes

View

<div class="flex w-full flex-col justify-evenly">
  <span class="mt-10 font-bold">SMALL</span>
  <blockquote class="text-lg font-semibold italic text-gray-900">
    <p>"Jamstacker 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>

<span class="mt-10 font-bold">MEDIUM</span>
  <blockquote class="text-xl font-semibold italic text-gray-900">
    <p>"Jamstacker 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>

<span class="mt-10 font-bold">LARGE</span>
  <blockquote class="text-2xl font-semibold italic text-gray-900">
    <p>"Jamstacker 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>
</div>

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

Blockquote Center

View

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

Blockquote Left

View

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

Blockquote Right

View

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

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

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

Range Sizes

View

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

Steps

View

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

Min and Max Range

View

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

Disabled Range

View

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

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

<div class="flex w-full flex-col">
  <div class="mb-4 flex rounded-lg bg-blue-50 p-4 text-sm text-blue-800" role="alert">
    <svg class="me-3 mt-[2px] inline 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>
    <div>
      <span class="font-medium">Ensure that these requirements are met:</span>
      <ul class="mt-1.5 list-inside list-disc">
        <li>At least 10 characters (and up to 100 characters)</li>
        <li>At least one lowercase character</li>
        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
      </ul>
    </div>
  </div>
  <div class="mb-4 flex rounded-lg bg-red-50 p-4 text-sm text-red-800" role="alert">
    <svg class="me-3 mt-[2px] inline 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">Danger</span>
    <div>
      <span class="font-medium">Ensure that these requirements are met:</span>
      <ul class="mt-1.5 list-inside list-disc">
        <li>At least 10 characters (and up to 100 characters)</li>
        <li>At least one lowercase character</li>
        <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
      </ul>
    </div>
  </div>
</div>

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

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

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

Progress Bar

View

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

Accordion

View

<div x-data="{ open: null }" class="w-full max-w-xl mx-auto">
  <div class="border-b border-gray-300">
    <button x-bind:aria-expanded="open === 1 ? 'true' : 'false'" @click="open = open === 1 ? null : 1" class="flex justify-between w-full p-4 text-left bg-transparent hover:bg-gray-100 focus:outline-none">
      <span class="text-base font-medium">Accordion Title 1</span>
      <span x-show="open === 1">-</span>
      <span x-show="open !== 1">+</span>
    </button>
    <div x-show="open === 1" class="overflow-hidden">
      <div class="p-4 text-sm bg-gray-50">
        This is the content for accordion item 1.
      </div>
    </div>
  </div>
  <div>
    <button x-bind:aria-expanded="open === 2 ? 'true' : 'false'" @click="open = open === 2 ? null : 2" class="flex justify-between w-full p-4 text-left bg-transparent hover:bg-gray-100 focus:outline-none">
      <span class="text-base font-medium">Accordion Title 2</span>
      <span x-show="open === 2">-</span>
      <span x-show="open !== 2">+</span>
    </button>
    <div x-show="open === 2" class="overflow-hidden">
      <div class="p-4 text-sm bg-gray-50">
        This is the content for accordion item 2.
      </div>
    </div>
  </div>
</div>

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

Card Component

View

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

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