<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 85
- Application 122
- Banner 20
- Blog 159
- Call to action 263
- Contact 97
- Content 14
- Content 128
- Cookies 105
- E-commerce (orders) 28
- E-commerce (products) 48
- FAQ 108
- Features 324
- Footer 125
- Footers 10
- Graphs 18
- HTTP codes 99
- Headers 226
- How it works 135
- Logo clouds 184
- Modals 9
- Navbar 68
- Navigation (horizontal) 238
- Navigation (vertical) 10
- Newsletter 113
- Portfolio 126
- Pricing 118
- Projects 9
- Reviews 10
- Sign in / Sign up 174
- Stats 107
- Ta general tables 7
- Tables 52
- Team 103
- Testimonials 130
- Users 25
Blog Components by Shuffle
Choose from 159 variations of Blog UI components. Presented here are variants available in various UI libraries.
Get access to all alert UI components, code and our visual editor. Try the demo for free!
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
