<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
All Frameworks
UI Library
All Libraries
Components
- Alert 266
- Application 226
- Banners 98
- Benefits 16
- Blog 285
- Breadcrumbs 24
- Call to action 403
- Cards 29
- Careers 40
- Confirmation 6
- Contact 189
- Content 217
- Cookies 193
- Dashboards 13
- Download 5
- E-commerce (orders) 63
- E-commerce (products) 120
- FAQ 185
- Features 514
- Footers 264
- Forms 9
- Gallery 5
- Graphs 65
- HTTP codes 211
- Hero section 350
- How it works 224
- Instagram photos 5
- Integrations 5
- Logo clouds 344
- Modals 42
- Navbar 305
- Navigation (horizontal) 432
- Navigation (vertical) 23
- Newsletter 218
- Notifications 7
- Paginations 12
- Portfolio 184
- Pricing 221
- Product info 5
- Projects 15
- Reviews 42
- Rich text 6
- Sign in / Sign up 335
- Snackbars 10
- Stats 281
- Tables 158
- Team 206
- Testimonials 244
- Users 59
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Blog Components by Shuffle
Choose from 285 variations of Blog UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
