Tailwind CSS About Components
About UI Components crafted in Tailwind CSS, great way to display key information of site, business or product. So, visitors can understand your business/product at a glance. The About Tailwind component can help you design one of the most important pages on your website. It is based on the Tailwind CSS UI component, so it can help you design the website of your dreams within minutes. In this Tailwind section, you can showcase all the important information regarding your business, the founders, the products, services, or whatever you like. TailGrids offer eight styles based on Tailwind CSS that can be perfect for your purpose. You can check them out and choose the one that works best for you. It allows for easy customization and building the About page on your landing page or website. If you are still thinking of just trying it out to see how it works for you, the free design would be ideal for serving as a playground.
About Style 1
FREE
FREE
About Style 1<!-- ====== About Section Start -->
<section class="pt-20 lg:pt-[120px] pb-12 lg:pb-[90px] overflow-hidden">
<div class="container">
<div class="flex flex-wrap justify-between items-center -mx-4">
<div class="w-full lg:w-6/12 px-4">
<div class="flex items-center -mx-3 sm:-mx-4">
<div class="w-full xl:w-1/2 px-3 sm:px-4">
<div class="py-3 sm:py-4">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-1.jpg"
alt=""
class="rounded-2xl w-full"
/>
</div>
<div class="py-3 sm:py-4">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-2.jpg"
alt=""
class="rounded-2xl w-full"
/>
</div>
</div>
<div class="w-full xl:w-1/2 px-3 sm:px-4">
<div class="my-4 relative z-10">
<img
src="https://cdn.tailgrids.com/1.0/assets/images/services/image-3.jpg"
alt=""
class="rounded-2xl w-full"
/>
<span class="absolute -right-7 -bottom-7 z-[-1]">
<svg
width="134"
height="106"
viewBox="0 0 134 106"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="1.66667"
cy="104"
r="1.66667"
transform="rotate(-90 1.66667 104)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="104"
r="1.66667"
transform="rotate(-90 16.3333 104)"
fill="#3056D3"
/>
<circle
cx="31"
cy="104"
r="1.66667"
transform="rotate(-90 31 104)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="104"
r="1.66667"
transform="rotate(-90 45.6667 104)"
fill="#3056D3"
/>
<circle
cx="60.3334"
cy="104"
r="1.66667"
transform="rotate(-90 60.3334 104)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="104"
r="1.66667"
transform="rotate(-90 88.6667 104)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="104"
r="1.66667"
transform="rotate(-90 117.667 104)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="104"
r="1.66667"
transform="rotate(-90 74.6667 104)"
fill="#3056D3"
/>
<circle
cx="103"
cy="104"
r="1.66667"
transform="rotate(-90 103 104)"
fill="#3056D3"
/>
<circle
cx="132"
cy="104"
r="1.66667"
transform="rotate(-90 132 104)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 1.66667 89.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="89.3333"
r="1.66667"
transform="rotate(-90 16.3333 89.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="89.3333"
r="1.66667"
transform="rotate(-90 31 89.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="89.3333"
r="1.66667"
transform="rotate(-90 45.6667 89.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="89.3338"
r="1.66667"
transform="rotate(-90 60.3333 89.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 88.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 117.667 89.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="89.3338"
r="1.66667"
transform="rotate(-90 74.6667 89.3338)"
fill="#3056D3"
/>
<circle
cx="103"
cy="89.3338"
r="1.66667"
transform="rotate(-90 103 89.3338)"
fill="#3056D3"
/>
<circle
cx="132"
cy="89.3338"
r="1.66667"
transform="rotate(-90 132 89.3338)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="74.6673"
r="1.66667"
transform="rotate(-90 1.66667 74.6673)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 1.66667 31.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 16.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="31.0003"
r="1.66667"
transform="rotate(-90 16.3333 31.0003)"
fill="#3056D3"
/>
<circle
cx="31"
cy="74.6668"
r="1.66667"
transform="rotate(-90 31 74.6668)"
fill="#3056D3"
/>
<circle
cx="31"
cy="31.0003"
r="1.66667"
transform="rotate(-90 31 31.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 45.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="31.0003"
r="1.66667"
transform="rotate(-90 45.6667 31.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="74.6668"
r="1.66667"
transform="rotate(-90 60.3333 74.6668)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="30.9998"
r="1.66667"
transform="rotate(-90 60.3333 30.9998)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 88.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 88.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 117.667 74.6668)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 117.667 30.9998)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="74.6668"
r="1.66667"
transform="rotate(-90 74.6667 74.6668)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="30.9998"
r="1.66667"
transform="rotate(-90 74.6667 30.9998)"
fill="#3056D3"
/>
<circle
cx="103"
cy="74.6668"
r="1.66667"
transform="rotate(-90 103 74.6668)"
fill="#3056D3"
/>
<circle
cx="103"
cy="30.9998"
r="1.66667"
transform="rotate(-90 103 30.9998)"
fill="#3056D3"
/>
<circle
cx="132"
cy="74.6668"
r="1.66667"
transform="rotate(-90 132 74.6668)"
fill="#3056D3"
/>
<circle
cx="132"
cy="30.9998"
r="1.66667"
transform="rotate(-90 132 30.9998)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 1.66667 60.0003)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 1.66667 16.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 16.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 16.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="60.0003"
r="1.66667"
transform="rotate(-90 31 60.0003)"
fill="#3056D3"
/>
<circle
cx="31"
cy="16.3333"
r="1.66667"
transform="rotate(-90 31 16.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 45.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 45.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="60.0003"
r="1.66667"
transform="rotate(-90 60.3333 60.0003)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="16.3333"
r="1.66667"
transform="rotate(-90 60.3333 16.3333)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 88.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 88.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 117.667 60.0003)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 117.667 16.3333)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="60.0003"
r="1.66667"
transform="rotate(-90 74.6667 60.0003)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="16.3333"
r="1.66667"
transform="rotate(-90 74.6667 16.3333)"
fill="#3056D3"
/>
<circle
cx="103"
cy="60.0003"
r="1.66667"
transform="rotate(-90 103 60.0003)"
fill="#3056D3"
/>
<circle
cx="103"
cy="16.3333"
r="1.66667"
transform="rotate(-90 103 16.3333)"
fill="#3056D3"
/>
<circle
cx="132"
cy="60.0003"
r="1.66667"
transform="rotate(-90 132 60.0003)"
fill="#3056D3"
/>
<circle
cx="132"
cy="16.3333"
r="1.66667"
transform="rotate(-90 132 16.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 1.66667 45.3333)"
fill="#3056D3"
/>
<circle
cx="1.66667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 1.66667 1.66683)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="45.3333"
r="1.66667"
transform="rotate(-90 16.3333 45.3333)"
fill="#3056D3"
/>
<circle
cx="16.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 16.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx="31"
cy="45.3333"
r="1.66667"
transform="rotate(-90 31 45.3333)"
fill="#3056D3"
/>
<circle
cx="31"
cy="1.66683"
r="1.66667"
transform="rotate(-90 31 1.66683)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="45.3333"
r="1.66667"
transform="rotate(-90 45.6667 45.3333)"
fill="#3056D3"
/>
<circle
cx="45.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 45.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="45.3338"
r="1.66667"
transform="rotate(-90 60.3333 45.3338)"
fill="#3056D3"
/>
<circle
cx="60.3333"
cy="1.66683"
r="1.66667"
transform="rotate(-90 60.3333 1.66683)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 88.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="88.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 88.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 117.667 45.3338)"
fill="#3056D3"
/>
<circle
cx="117.667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 117.667 1.66683)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="45.3338"
r="1.66667"
transform="rotate(-90 74.6667 45.3338)"
fill="#3056D3"
/>
<circle
cx="74.6667"
cy="1.66683"
r="1.66667"
transform="rotate(-90 74.6667 1.66683)"
fill="#3056D3"
/>
<circle
cx="103"
cy="45.3338"
r="1.66667"
transform="rotate(-90 103 45.3338)"
fill="#3056D3"
/>
<circle
cx="103"
cy="1.66683"
r="1.66667"
transform="rotate(-90 103 1.66683)"
fill="#3056D3"
/>
<circle
cx="132"
cy="45.3338"
r="1.66667"
transform="rotate(-90 132 45.3338)"
fill="#3056D3"
/>
<circle
cx="132"
cy="1.66683"
r="1.66667"
transform="rotate(-90 132 1.66683)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 xl:w-5/12 px-4">
<div class="mt-10 lg:mt-0">
<span class="font-semibold text-lg text-primary mb-2 block">
Why Choose Us
</span>
<h2 class="font-bold text-3xl sm:text-4xl text-dark mb-8">
Make your customers happy by giving services.
</h2>
<p class="text-base text-body-color mb-8">
It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less.
</p>
<p class="text-base text-body-color mb-12">
A domain name is one of the first steps to establishing your
brand. Secure a consistent brand image with a domain name that
matches your business.
</p>
<a
href="javascript:void(0)"
class="
py-4
px-10
lg:px-8
xl:px-10
inline-flex
items-center
justify-center
text-center text-white text-base
bg-primary
hover:bg-opacity-90
font-normal
rounded-lg
"
>
Get Started
</a>
</div>
</div>
</div>
</div>
</section>
<!-- ====== About Section End -->
About Style 2
PRO
PRO
About Style 2
About Style 3
PRO
PRO
About Style 3
About Style 4
PRO
PRO
About Style 4
About Style 5
PRO
PRO
About Style 5
About Style 6
PRO
PRO
About Style 6
About Style 7
PRO
PRO
About Style 7
About Style 8
PRO
PRO
About Style 8