Loading...
Back

#Interactive List FAQ

faq

Presents FAQs in an interactive list where answers expand on click, often including a user feedback option.

Help Center

Everything you need to know about our products and services. Can't find an answer? We're here to help.

SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.

Was this helpful? Thanks for your feedback!

The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.

Was this helpful? Thanks for your feedback!

Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.

Was this helpful? Thanks for your feedback! 
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
  <div class="mb-10 lg:mb-16 text-center">
    <h2 class="text-3xl lg:text-5xl font-bold mb-3 text-neutral-800">Help Center</h2>
    <p class="text-lg lg:text-xl text-neutral-600 max-w-xl mx-auto">
      Everything you need to know about our products and services. Can't find an answer? We're here to help.
    </p>
  </div>

  <div class="divide-y divide-neutral-200 max-w-3xl mx-auto">
    <div x-data="{ isOpen: false, feedback: null }" class="py-6">
      <dt class="text-lg">
        <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500">
          <span class="font-medium text-neutral-900">What makes SenangStart different from other UI kits?</span>
          <span class="ml-6 h-7 flex items-center">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse class="mt-2 pr-12">
        <p class="text-base text-neutral-600">
          SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.
        </p>
        <div class="mt-4 text-sm" x-show="isOpen">
          <span class="text-neutral-600 mr-2">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button>
          <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>

    <div x-data="{ isOpen: true, feedback: null }" class="py-6">
      <dt class="text-lg">
        <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500">
          <span class="font-medium text-neutral-900">Can I use these components in a non-Tailwind project?</span>
          <span class="ml-6 h-7 flex items-center">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse class="mt-2 pr-12">
        <p class="text-base text-neutral-600">
          The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.
        </p>
        <div class="mt-4 text-sm" x-show="isOpen">
          <span class="text-neutral-600 mr-2">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button>
          <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>

    <div x-data="{ isOpen: false, feedback: null }" class="py-6">
      <dt class="text-lg">
        <button @click="isOpen = !isOpen" class="text-left w-full flex justify-between items-start text-neutral-500">
          <span class="font-medium text-neutral-900">Are there any dependencies other than Tailwind CSS?</span>
          <span class="ml-6 h-7 flex items-center">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" class="fas fa-chevron-down transform transition-transform duration-200 ease-in-out"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse class="mt-2 pr-12">
        <p class="text-base text-neutral-600">
          Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.
        </p>
        <div class="mt-4 text-sm" x-show="isOpen">
          <span class="text-neutral-600 mr-2">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" class="px-2 py-1 rounded-md text-xs">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" class="ml-1 px-2 py-1 rounded-md text-xs">No</button>
          <span x-show="feedback" class="ml-2 text-blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>
  </div>
</section>

Help Center

Everything you need to know about our products and services. Can't find an answer? We're here to help.

SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.

Was this helpful? Thanks for your feedback!

The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.

Was this helpful? Thanks for your feedback!

Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.

Was this helpful? Thanks for your feedback! 
<section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto">
  <div space="m-b:large-3x tw-lg:m-b:big-3x" visual="text:center">
    <h2 space="m-b:small-3x" visual="text-size:grand tw-lg:text-size:mount font:tw-bold text:neutral-800">Help Center</h2>
    <p space="max-w:[xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-600">
      Everything you need to know about our products and services. Can't find an answer? We're here to help.
    </p>
  </div>

  <div space="max-w:[3xl] m-x:auto" class="divide-y divide-neutral-200">
    <div x-data="{ isOpen: false, feedback: null }" space="p-y:medium-3x">
      <dt visual="text-size:large">
        <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-500">
          <span visual="font:tw-medium text:neutral-900">What makes SenangStart different from other UI kits?</span>
          <span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse space="m-t:small p-r:big">
        <p visual="text-size:base text:neutral-600">
          SenangStart focuses on providing ready-to-use, production-quality HTML sections built with Tailwind CSS. We prioritize ease of integration, clean code, and designs that are practical for real-world projects, often with Alpine.js for simple interactions.
        </p>
        <div space="m-t:medium" visual="text-size:small" x-show="isOpen">
          <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button>
          <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>

    <div x-data="{ isOpen: true, feedback: null }" space="p-y:medium-3x">
      <dt visual="text-size:large">
        <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-500">
          <span visual="font:tw-medium text:neutral-900">Can I use these components in a non-Tailwind project?</span>
          <span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse space="m-t:small p-r:big">
        <p visual="text-size:base text:neutral-600">
          The components are heavily reliant on Tailwind CSS utility classes. While you could extract the styles, it's designed primarily for projects already using or planning to use Tailwind CSS for the best experience and easiest integration.
        </p>
        <div space="m-t:medium" visual="text-size:small" x-show="isOpen">
          <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button>
          <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>

    <div x-data="{ isOpen: false, feedback: null }" space="p-y:medium-3x">
      <dt visual="text-size:large">
        <button @click="isOpen = !isOpen" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-500">
          <span visual="font:tw-medium text:neutral-900">Are there any dependencies other than Tailwind CSS?</span>
          <span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
            <i :class="{ '-rotate-180': isOpen, 'rotate-0': !isOpen }" visual="transition:transform duration:normal ease:in-out" class="fas fa-chevron-down transform"></i>
          </span>
        </button>
      </dt>
      <dd x-show="isOpen" x-collapse space="m-t:small p-r:big">
        <p visual="text-size:base text:neutral-600">
          Most components are pure HTML and Tailwind CSS. For interactive elements like dropdowns, modals, or accordions (like this one), we use Alpine.js due to its simplicity and direct integration with HTML. You'll need to include Alpine.js in your project for these to function.
        </p>
        <div space="m-t:medium" visual="text-size:small" x-show="isOpen">
          <span space="m-r:small" visual="text:neutral-600">Was this helpful?</span>
          <button @click="feedback = 'yes'" :class="{':'bg-blue-600 text-white': feedback === 'yes', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'yes'}" space="p-x:small p-y:tiny" visual="rounded:small text-size:mini">Yes</button>
          <button @click="feedback = 'no'" :class="{':'bg-blue-600 text-white': feedback === 'no', 'bg-neutral-200 hover:bg-neutral-300': feedback !== 'no'}" space="m-l:tiny p-x:small p-y:tiny" visual="rounded:small text-size:mini">No</button>
          <span x-show="feedback" space="m-l:small" visual="text:blue-600 italic">Thanks for your feedback!</span>
        </div>
      </dd>
    </div>
  </div>
</section>