<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="mb-14 text-center">
<span class="text-lg text-blue-400 font-bold">What's new at Shuffle</span>
<h2 class="mt-8 text-5xl font-bold font-heading text-white">Latest blog</h2>
</div>
<div class="flex flex-wrap -m-6">
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 left-0 -ml-40 mt-24" src="zospace-assets/lines/left-line.svg" alt="">
<div class="relative z-10 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="w-full h-full rounded-lg object-cover object-top" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">30</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">Is remote work working? A one year check-in</a></div>
</div>
</div>
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 left-0 -ml-14 mt-24" src="zospace-assets/lines/right-line.svg" alt="">
<div class="relative z-10 lg:mt-24 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="w-full h-full rounded-lg object-cover" src="https://images.pexels.com/photos/5325768/pexels-photo-5325768.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">29</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">10 ways to keep your remote teams engaged</a></div>
</div>
</div>
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 right-0 mr-64 mt-24" src="zospace-assets/lines/left-line.svg" alt="">
<div class="relative z-10 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="mb-8 w-full h-52 rounded-lg object-cover" src="https://images.pexels.com/photos/5325708/pexels-photo-5325708.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">25</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">How to make a concept map (+Examples)</a></div>
</div>
<img class="hidden lg:block absolute top-0 right-0 -mr-32 mt-24" src="zospace-assets/lines/right-line.svg" alt="">
</div>
</div>
<div class="mt-14 lg:mt-24 text-center"><a class="inline-block py-5 px-12 mr-4 bg-blue-500 hover:bg-blue-600 rounded-full text-white font-bold transition duration-200" href="#">See all</a></div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 245
- Application 161
- Applications 5
- Banner 45
- Blog 209
- Call to action 318
- Careers 20
- Contact 130
- Contacts 5
- Content 172
- Cookies 153
- E-commerce (orders) 56
- E-commerce (products) 93
- FAQ 136
- Features 402
- Footers 186
- Graphs 46
- HTTP codes 153
- Headers 276
- How it works 171
- Logo clouds 246
- Modals 15
- Navbar 140
- Navigation (horizontal) 302
- Navigation (vertical) 14
- Navigations 4
- Newsletter 163
- Portfolio 147
- Pricing 160
- Projects 9
- Reviews 20
- Rich text 3
- Sign in / Sign up 236
- Stats 219
- Tables 5
- Tables 132
- Team 147
- Testimonials 179
- Users 59
Component #1
Blog Components by Shuffle
Choose from 209 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!
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
