<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
Tailwind CSS
UI Library
All Libraries
Components
- Alert 80
- Application 80
- Banner 20
- Blog 100
- Call to action 152
- Careers 20
- Contact 76
- Content 65
- Cookies 79
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 66
- Features 170
- Footers 100
- Graphs 19
- HTTP codes 77
- Headers 122
- How it works 99
- Logo clouds 120
- Modals 8
- Navbar 44
- Navigation (horizontal) 146
- Navigation (vertical) 2
- Newsletter 87
- Portfolio 77
- Pricing 94
- Reviews 10
- Rich text 3
- Sign in / Sign up 120
- Stats 115
- Tables 56
- Team 85
- Testimonials 107
- Users 17
Component #1
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.
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
