Home List Features Using Tailwind UI
This home list features tailwind component is show features list, it is use Tailwind CSS to create this beautiful home list features.
section
Loading component...
149 lines
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
.body {
font-family: "Inter", sans-serif;
}
</style>
<section class="body-font">
<div class="container max-w-6xl px-5 py-4 mx-auto">
<h1 class="mb-8 text-4xl font-bold text-center md:text-6xl">
Our Energy Services make temporary power a breeze.
</h1>
<div class="flex flex-col md:flex-row">
<div class="w-full p-4 md:w-1/2">
<div class="flex-col p-8 sm:flex-row">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-16 h-16 mb-4 sm:mr-8 sm:mb-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-10 h-10"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
/>
</svg>
</div>
<hr class="my-4" />
<div class="flex">
<h2 class="w-1/3 mb-3 text-base font-bold text-gray-900 title-font">
Seamless
</h2>
<p class="w-1/3 text-sm leading-relaxed">
Streamlined delivery and pickup. Simple to set up.
</p>
</div>
</div>
</div>
<div class="w-full p-4 md:w-1/2">
<div class="flex-col p-8 sm:flex-row">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-16 h-16 mb-4 sm:mr-8 sm:mb-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-10 h-10"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0112 12.75zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 01-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 002.248-2.354M12 12.75a2.25 2.25 0 01-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 00-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 01.4-2.253M12 8.25a2.25 2.25 0 00-2.248 2.146M12 8.25a2.25 2.25 0 012.248 2.146M8.683 5a6.032 6.032 0 01-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0115.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 00-.575-1.752M4.921 6a24.048 24.048 0 00-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 01-5.223 1.082"
/>
</svg>
</div>
<hr class="my-4" />
<div class="flex">
<h2 class="w-1/3 mb-3 text-base font-bold text-gray-900 title-font">
Anxiety
</h2>
<p class="w-1/3 text-sm leading-relaxed">
Swappable batteries ensure continuous power
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row">
<div class="w-full p-4 md:w-1/2">
<div class="flex-col p-8 sm:flex-row">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-16 h-16 mb-4 sm:mr-8 sm:mb-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-10 h-10"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zm-7.518-.267A8.25 8.25 0 1120.25 10.5M8.288 14.212A5.25 5.25 0 1117.25 10.5"
/>
</svg>
</div>
<hr class="my-4" />
<div class="flex">
<h2 class="w-1/3 mb-3 text-base font-bold text-gray-900 title-font">
Monitoring
</h2>
<p class="w-1/3 text-sm leading-relaxed">
Track and analyze your historical energy consumption
</p>
</div>
</div>
</div>
<div class="w-full p-4 md:w-1/2">
<div class="flex-col p-8 sm:flex-row">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-16 h-16 mb-4 sm:mr-8 sm:mb-0"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-10 h-10"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
/>
</svg>
</div>
<hr class="my-4" />
<div class="flex">
<h2 class="w-1/3 mb-3 text-base font-bold text-gray-900 title-font">
Traceability
</h2>
<p class="w-1/3 text-sm leading-relaxed">
Know exactly where your energy is coming from.
</p>
</div>
</div>
</div>
</div>
</div>
</section>