Feature Sections
- Default feature list
- Image with feature list and CTAs
- Feature list with CTAs
- Feature list with icons
- Feature icons and CTA
- Description with feature list icons
- Feature list cards
- Alternate image with feature list
- Comparison cards
- Feature section with rounded icons
Get started with a collection of responsive website sections built with Tailwind CSS to showcase a list of features that your product or company offers.
Default feature list
Get started with this default example of feature items based on a grid layout where you can show up to three items on a row featuring an icon, title and description.
Default feature list
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div
class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Marketing</h3>
<p class="text-gray-500 dark:text-gray-400">
Plan it, create it, launch it. Collaborate seamlessly with all the
organization and hit your marketing goals every month with our
marketing plan.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Legal</h3>
<p class="text-gray-500 dark:text-gray-400">
Protect your organization, devices and stay compliant with our
structured workflows and custom permissions made for you.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Business Automation
</h3>
<p class="text-gray-500 dark:text-gray-400">
Auto-assign tasks, send Slack messages, and much more. Now power up
with hundreds of new templates to help you get started.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
></path>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Finance</h3>
<p class="text-gray-500 dark:text-gray-400">
Audit-proof software built for critical financial operations like
month-end close and quarterly budgeting.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Enterprise Design
</h3>
<p class="text-gray-500 dark:text-gray-400">
Craft beautiful, delightful experiences for both marketing and product
with real cross-company collaboration.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Operations</h3>
<p class="text-gray-500 dark:text-gray-400">
Keep your company’s lights on with customizable, iterative, and
structured workflows built for all efficient teams and individual.
</p>
</div>
</div>
</div>
</section>
<!-- Block end -->Image with feature list and CTAs
This example can be used if you also want to show a visual image and a CTA link below each feature list item.
Image with feature list and CTAs
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 xl:gap-16 sm:py-16 lg:px-6"
>
<img
class="mb-4 w-full lg:mb-0 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/features/feature-office-long.png"
alt="feature image"
/>
<div class="text-gray-500 dark:text-gray-400 sm:text-lg">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams
</h2>
<p class="mb-8 font-light lg:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease.
</p>
<div
class="py-8 mb-6 border-t border-b border-gray-200 dark:border-gray-700"
>
<div class="flex">
<div
class="flex justify-center items-center mr-4 w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 shrink-0"
>
<svg
class="w-5 h-5 text-primary-600 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Private repos
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
Host code that you don't want to share with the world in private
GitHub repos only accessible to you and people you share them
with.
</p>
<a
href="#"
class="inline-flex items-center text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-600"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div class="flex pt-8">
<div
class="flex justify-center items-center mr-4 w-8 h-8 bg-purple-100 rounded-full dark:bg-purple-900 shrink-0"
>
<svg
class="w-5 h-5 text-purple-600 dark:text-purple-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Dependency graph
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
See the packages your project depends on, the repositories that
depend on them, and any vulnerabilities detected.
</p>
<a
href="#"
class="inline-flex items-center text-purple-600 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-600"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div class="flex pt-8">
<div
class="flex justify-center items-center mr-4 w-8 h-8 bg-teal-100 rounded-full dark:bg-teal-900 shrink-0"
>
<svg
class="w-5 h-5 text-teal-600 dark;text-teal-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</div>
<div>
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Code scanning
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
Find vulnerabilities in custom code using static analysis. Prevent
new vulnerabilities from being introduced by scanning every pull
request.
</p>
<a
href="#"
class="inline-flex items-center text-teal-600 hover:text-teal-800 dark:text-teal-500 dark:hover:text-teal-600"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
<p class="text-sm">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease.
</p>
</div>
</div>
</section>
<!-- Block end -->Feature list with CTAs
Get started with this example to show a CTA link after each feature item including an icon, title and description.
Feature list with CTAs
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center sm:py-16 lg:px-6">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
The most trusted cryptocurrency platform
</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400">
Here are a few reasons why you should choose Flowbite
</p>
<div
class="mt-8 lg:mt-12 space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z"
clip-rule="evenodd"
></path>
<path
fill-rule="evenodd"
d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z"
clip-rule="evenodd"
></path>
<path
fill-rule="evenodd"
d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Secure storage</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
We store the vast majority of the digital assets in secure offline
storage.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn how to keep your funds safe
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path
fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Insurance</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Flowbite maintains crypto insurance and all USD cash balances are
covered.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn how your crypto is covered
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Best practices</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Flowbite marketplace supports a variety of the most popular digital
currencies.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
How to implement best practices
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Block end -->Feature list with icons
Use this example if you want to create a sub-list of feature items using the check icon and increase the conversion rate of your website visitors.
Feature list with icons
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Secure platform, secure data
</h2>
<p class="font-light text-gray-500 dark:text-gray-400 sm:text-xl">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div
class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-8 xl:gap-12 md:space-y-0"
>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 bg-purple-100 rounded dark:bg-purple-900 lg:h-16 lg:w-16"
>
<svg
class="w-5 h-5 text-primary-600 dark:text-primary-300 lg:w-8 lg:h-8"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Project Management
</h3>
<ul role="list" class="my-6 lg:mb-0 space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Unified Contribution Graph</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Org activity graph</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Org dependency insights</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Milestones</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Repo insights</span
>
</li>
</ul>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 bg-purple-100 rounded dark:bg-purple-900 lg:h-16 lg:w-16"
>
<svg
class="w-5 h-5 text-purple-600 dark:text-purple-300 lg:w-8 lg:h-8"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Collaborative Coding
</h3>
<ul role="list" class="my-6 lg:mb-0 space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Dynamic reports and dashboards</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Code review assignments</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Team discussions</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Protected branches</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Draft pull requests</span
>
</li>
</ul>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 bg-teal-100 rounded dark:bg-teal-900 lg:h-16 lg:w-16"
>
<svg
class="w-5 h-5 text-teal-600 dark:text-teal-300 lg:w-8 lg:h-8"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Enterprise Security
</h3>
<ul role="list" class="my-6 lg:mb-0 space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-teal-500 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Required reviews</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-teal-500 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Dependabot security and</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-teal-500 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>Dependency graph</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-teal-500 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>GitHub Advisory Database</span
>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-teal-500 dark:text-teal-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400"
>GPG commit signing verification</span
>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Block end -->Feature icons and CTA
This example can be used to show two feature items with a heading and description and a CTA link below.
Feature icons and CTA
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center sm:py-16 lg:px-6">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
The most trusted cryptocurrency platform
</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400">
Here are a few reasons why you should choose Flowbite
</p>
<div
class="mt-8 lg:mt-12 space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z"
clip-rule="evenodd"
></path>
<path
fill-rule="evenodd"
d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z"
clip-rule="evenodd"
></path>
<path
fill-rule="evenodd"
d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Secure storage</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
We store the vast majority of the digital assets in secure offline
storage.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn how to keep your funds safe
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path
fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Insurance</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Flowbite maintains crypto insurance and all USD cash balances are
covered.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn how your crypto is covered
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<svg
class="mx-auto mb-4 w-12 h-12 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<h3 class="mb-2 text-xl font-bold dark:text-white">Best practices</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Flowbite marketplace supports a variety of the most popular digital
currencies.
</p>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
How to implement best practices
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Block end -->Description with feature list icons
Use this example if you also want to show a heading and description next to a list of feature list items with an icon, title, and description.
Description with feature list icons
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid xl:grid-cols-3 lg:gap-8 xl:gap-24 sm:py-16 lg:px-6"
>
<div class="mb-8 lg:mb-0">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for strong teams like yours
</h2>
<p class="mb-4 text-gray-500 sm:text-xl dark:text-gray-400">
Here we focus on markets where creativity and innovation can unlock
long-term value and growth.
</p>
<a
href="#"
class="inline-flex items-center text-lg font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div
class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0"
>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Marketing</h3>
<p class="text-gray-500 dark:text-gray-400">
Plan it, create it, launch it. Collaborate seamlessly with all the
organization and hit your marketing goals every month with our
marketing plan.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Business Automation
</h3>
<p class="text-gray-500 dark:text-gray-400">
Auto-assign tasks, send Slack messages, and much more. Now power up
with hundreds of new templates to help you get started.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
></path>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Finance</h3>
<p class="text-gray-500 dark:text-gray-400">
Audit-proof software built for critical financial operations like
month-end close and quarterly budgeting.
</p>
</div>
<div>
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded-full bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Enterprise Design
</h3>
<p class="text-gray-500 dark:text-gray-400">
Craft beautiful, delightful experiences for both marketing and product
with real cross-company collaboration.
</p>
</div>
</div>
</div>
</section>
<!-- Block end -->Feature list cards
Use this example to showcase a list of features with an icon box, heading and description inside a card with up to four items on a row.
Feature list cards
html
<!-- Block start -->
<section class="bg-gray-50 dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Secure platform, secure data
</h2>
<p class="font-light text-gray-500 dark:text-gray-400 sm:text-xl">
Here at Flowbite we focus on markets where technology, innovation, and
capital can unlock long-term value and drive economic growth.
</p>
</div>
<div
class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8 xl:gap-8 md:space-y-0"
>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Marketing</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Plan it, create it, launch it. Collaborate seamlessly with all the
organization and hit your marketing goals every month with our
marketing plan.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Legal</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Protect your organization, devices and stay compliant with our
structured workflows and custom permissions made for you.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
<path
d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Business Automation
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Auto-assign tasks, send Slack messages, and much more. Now power up
with hundreds of new templates to help you get started.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
></path>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Finance</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Audit-proof software built for critical financial operations like
month-end close and quarterly budgeting.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Enterprise Design
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Craft beautiful, delightful experiences for both marketing and product
with real cross-company collaboration.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Operations</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Keep your company’s lights on with customizable, iterative, and
structured workflows built for all efficient teams and individual.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">
Enterprise Design
</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Craft beautiful, delightful experiences for both marketing and product
with real cross-company collaboration.
</p>
</div>
<div class="p-6 bg-white rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 lg:h-12 lg:w-12 dark:bg-primary-900"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-2 text-xl font-bold dark:text-white">Operations</h3>
<p class="font-light text-gray-500 dark:text-gray-400">
Keep your company’s lights on with customizable, iterative, and
structured workflows built for all efficient teams and individual.
</p>
</div>
</div>
</div>
</section>
<!-- Block end -->Alternate image with feature list
Get started with this example if you want to alternate an image and feature list next to each other and improve the visual attractiveness of the page.
Alternate image with feature list
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="py-8 px-4 mx-auto space-y-12 max-w-screen-xl lg:space-y-20 sm:py-16 lg:px-6"
>
<!-- Row -->
<div class="gap-8 items-center lg:grid lg:grid-cols-2 xl:gap-16">
<div class="text-gray-500 sm:text-lg dark:text-gray-400">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Work with tools you already use
</h2>
<p class="mb-8 font-light lg:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease.
</p>
<!-- List -->
<ul
role="list"
class="pt-8 my-7 space-y-5 border-t border-gray-200 dark:border-gray-700"
>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Continuous integration and deployment</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Development workflow</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Knowledge management</span
>
</li>
</ul>
<p class="mb-8 font-light lg:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.
</p>
</div>
<img
class="hidden mb-4 w-full lg:mb-0 lg:flex rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/features/feature-office-1.png"
alt="office feature image"
/>
</div>
<!-- Row -->
<div class="gap-8 items-center lg:grid lg:grid-cols-2 xl:gap-16">
<img
class="hidden mb-4 w-full lg:mb-0 lg:flex rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/features/feature-office-2.png"
alt="office feature image 2"
/>
<div class="text-gray-500 sm:text-lg dark:text-gray-400">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
We invest in the world’s potential
</h2>
<p class="mb-8 font-light lg:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease.
</p>
<!-- List -->
<ul
role="list"
class="pt-8 my-7 space-y-5 border-t border-gray-200 dark:border-gray-700"
>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Dynamic reports and dashboards</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Templates for everyone</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Development workflow</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Limitless business automation</span
>
</li>
<li class="flex space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<span
class="text-base font-medium leading-tight text-gray-900 dark:text-white"
>Knowledge management</span
>
</li>
</ul>
<p class="font-light lg:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.
</p>
</div>
</div>
</div>
</section>
<!-- Block end -->Comparison cards
Get started with this example of feature list cards where you can compare your website's features with a competitor's one.
Comparison cards
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="grid space-y-8 lg:grid-cols-2 lg:gap-12 lg:space-y-0">
<div>
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Compare Flowbite to other platforms on the market
</h2>
<p class="mb-4 text-gray-500 sm:text-xl dark:text-gray-400">
Here we focus on markets where technology, innovation, and capital can
unlock long-term value and drive economic growth.
</p>
<a
href="#"
class="inline-flex items-center font-medium sm:text-lg text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn what makes Flowbite different
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div>
<a
href="#"
class="flex justify-between items-center p-4 mb-6 bg-white rounded-lg border-l-8 shadow dark:bg-gray-800 dark:hover:bg-gray-700 border-primary-600 dark:border-primary-500 hover:bg-gray-50"
>
<div>
<span
class="block mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400"
>Simplicity and Affordability</span
>
<span
class="text-xl font-semibold text-primary-600 dark:text-primary-500"
>Flowbite vs Google</span
>
</div>
<svg
class="w-6 h-6 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="flex justify-between items-center p-4 mb-6 bg-white rounded-lg border-l-8 border-purple-600 shadow dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-purple-500 hover:bg-gray-50"
>
<div>
<span
class="block mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400"
>Built for customer support</span
>
<span
class="text-xl font-semibold text-purple-600 dark:text-purple-500"
>Microsoft vs Apple</span
>
</div>
<svg
class="w-6 h-6 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="flex justify-between items-center p-4 bg-white rounded-lg border-l-8 border-teal-600 shadow dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-teal-500 hover:bg-gray-50"
>
<div>
<span
class="block mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400"
>Modern and intuitive ui</span
>
<span class="text-xl font-semibold text-teal-600 dark:text-teal-500"
>Zendesk vs Meet</span
>
</div>
<svg
class="w-6 h-6 text-teal-600 dark:text-teal-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Block end -->Feature section with rounded icons
Use this example to show a list of features with rounded background icons, a title, a description, and a CTA button at the end of the section.
Feature section with rounded icons
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center sm:py-16 lg:px-6">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Designed for business teams like yours
</h2>
<p class="text-gray-500 sm:text-xl dark:text-gray-400 lg:px-48">
Here we focus on markets where technology, innovation, and capital can
unlock long-term value and drive economic growth.
</p>
<div
class="mt-8 lg:mt-16 mb-8 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0"
>
<div>
<div
class="inline-flex justify-center items-center mb-6 w-24 h-24 rounded-lg bg-primary-100 dark:bg-primary-900"
>
<svg
class="mx-auto w-16 h-16 text-primary-600 dark:text-primary-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold dark:text-white">
Just the right balance for growth
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Enterprise tools cost more, are difficult to use, and take longer to
implement. According to G2, Flowbite is the easiest-to-use tool, with
the fastest time to ROI.
</p>
</div>
<div>
<div
class="inline-flex justify-center items-center mb-6 w-24 h-24 bg-purple-100 rounded-lg dark:bg-purple-900"
>
<svg
class="mx-auto w-16 h-16 text-purple-600 dark:text-purple-500"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M9.504 1.132a1 1 0 01.992 0l1.75 1a1 1 0 11-.992 1.736L10 3.152l-1.254.716a1 1 0 11-.992-1.736l1.75-1zM5.618 4.504a1 1 0 01-.372 1.364L5.016 6l.23.132a1 1 0 11-.992 1.736L4 7.723V8a1 1 0 01-2 0V6a.996.996 0 01.52-.878l1.734-.99a1 1 0 011.364.372zm8.764 0a1 1 0 011.364-.372l1.733.99A1.002 1.002 0 0118 6v2a1 1 0 11-2 0v-.277l-.254.145a1 1 0 11-.992-1.736l.23-.132-.23-.132a1 1 0 01-.372-1.364zm-7 4a1 1 0 011.364-.372L10 8.848l1.254-.716a1 1 0 11.992 1.736L11 10.58V12a1 1 0 11-2 0v-1.42l-1.246-.712a1 1 0 01-.372-1.364zM3 11a1 1 0 011 1v1.42l1.246.712a1 1 0 11-.992 1.736l-1.75-1A1 1 0 012 14v-2a1 1 0 011-1zm14 0a1 1 0 011 1v2a1 1 0 01-.504.868l-1.75 1a1 1 0 11-.992-1.736L16 13.42V12a1 1 0 011-1zm-9.618 5.504a1 1 0 011.364-.372l.254.145V16a1 1 0 112 0v.277l.254-.145a1 1 0 11.992 1.736l-1.735.992a.995.995 0 01-1.022 0l-1.735-.992a1 1 0 01-.372-1.364z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-4 text-2xl font-bold dark:text-white">
Just the right balance for growth
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Enterprise tools cost more, are difficult to use, and take longer to
implement. According to G2, Flowbite is the easiest-to-use tool, with
the fastest time to ROI.
</p>
</div>
</div>
<p class="text-center">
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400"
>
Learn what makes Flowbite different
<svg
class="ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</p>
</div>
</section>
<!-- Block end -->