<section class="pt-24 pb-36 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<h2 class="mb-4 text-6xl md:text-7xl text-center font-bold font-heading font-heading tracking-px-n leading-tight">Latest from Blog</h2>
<p class="mb-24 font-medium text-gray-600 text-center leading-relaxed md:max-w-lg mx-auto">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condimentum vitae vel purus.</p>
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap lg:items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-xl">
<img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/blog/blog.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<div class="md:max-w-xs">
<div class="flex flex-col justify-between h-full">
<div class="mb-6">
<p class="mb-1.5 text-sm text-gray-500 font-medium uppercase tracking-px">Product</p>
<a class="inline-block hover:text-gray-800 hover:underline" href="#">
<h3 class="text-xl font-semibold leading-normal">An IT services company that can grow your business</h3>
</a>
</div>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<img src="flaro-assets/images/blog/blog-avatar.png" alt="">
</div>
<div class="w-auto p-1">
<p class="text-sm font-semibold leading-relaxed">Wade Warren</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap lg:items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-xl">
<img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/blog/blog2.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<div class="md:max-w-xs">
<div class="flex flex-col justify-between h-full">
<div class="mb-6">
<p class="mb-1.5 text-sm text-gray-500 font-medium uppercase tracking-px">Product</p>
<a class="inline-block hover:text-gray-800 hover:underline" href="#">
<h3 class="text-xl font-semibold leading-normal">How to handle your good employee for the business</h3>
</a>
</div>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<img src="flaro-assets/images/blog/blog-avatar2.png" alt="">
</div>
<div class="w-auto p-1">
<p class="text-sm font-semibold leading-relaxed">Bessie Cooper</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap lg:items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-xl">
<img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/blog/blog3.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<div class="md:max-w-xs">
<div class="flex flex-col justify-between h-full">
<div class="mb-6">
<p class="mb-1.5 text-sm text-gray-500 font-medium uppercase tracking-px">Product</p>
<a class="inline-block hover:text-gray-800 hover:underline" href="#">
<h3 class="text-xl font-semibold leading-normal">New consulting for all kind offer related to IT services</h3>
</a>
</div>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<img src="flaro-assets/images/blog/blog-avatar3.png" alt="">
</div>
<div class="w-auto p-1">
<p class="text-sm font-semibold leading-relaxed">Albert Flores</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap lg:items-center -m-4">
<div class="w-auto p-4">
<div class="overflow-hidden rounded-xl">
<img class="transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/blog/blog4.png" alt="">
</div>
</div>
<div class="flex-1 p-4">
<div class="md:max-w-xs">
<div class="flex flex-col justify-between h-full">
<div class="mb-6">
<p class="mb-1.5 text-sm text-gray-500 font-medium uppercase tracking-px">Product</p>
<a class="inline-block hover:text-gray-800 hover:underline" href="#">
<h3 class="text-xl font-semibold leading-normal">How life insurance helps you during financial insolvency</h3>
</a>
</div>
<div class="flex flex-wrap items-center -m-1">
<div class="w-auto p-1">
<img src="flaro-assets/images/blog/blog-avatar4.png" alt="">
</div>
<div class="w-auto p-1">
<p class="text-sm font-semibold leading-relaxed">Jerome Bell</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Having a blog is one of the most commonly chosen SEO strategies. However, for a blog to fulfill this role, it should be well designed and attractive to the audience. Our selection of Tailwind blog components will help you achieve this effect.
Choose from many variations of Tailwind blog posts components. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Tailwind blog posts components, code and our editor. Try the demo for free.
