Tailwind CSS Blog & News Sections

Tailwind Blog with testimonials

Let users surf through testimonials while checking your blog. It will have navigation button which will let user read multiple testimonials without having to go out of the blog page.

Preview
Code

Figma File

                                                <style>
        .swiper-button-prev:after,
        .swiper-rtl .swiper-button-next:after {
            content: '' !important;
        }

        .swiper-button-next:after,
        .swiper-rtl .swiper-button-prev:after {
            content: '' !important;
        }

        .swiper-button-next svg,
        .swiper-button-prev svg {
            width: 24px !important;
            height: 24px !important;
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: relative !important;
        }

        .swiper-slide.swiper-slide-active {
            --tw-border-opacity: 1 !important;
            border-color: rgb(79 70 229 / var(--tw-border-opacity)) !important;
        }

        .swiper-slide.swiper-slide-active>.swiper-slide-active\:text-indigo-600 {
            --tw-text-opacity: 1;
            color: rgb(79 70 229 / var(--tw-text-opacity));
        }

        .swiper-slide.swiper-slide-active>.flex .grid .swiper-slide-active\:text-indigo-600 {
            --tw-text-opacity: 1;
            color: rgb(79 70 229 / var(--tw-text-opacity));
        }
    </style>
    <section class="py-24 ">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex justify-center flex-wrap md:flex-wrap lg:flex-nowrap lg:flex-row lg:justify-between gap-8">
            

                
                <div class="w-full flex justify-between flex-col lg:w-2/5">
                    <div class="block lg:text-left text-center">
                    <h2 class="text-4xl font-bold text-gray-900 leading-[3.25rem] mb-5">Our latest <span class=" text-indigo-600">blogs</span></h2>
                    <p class="text-gray-500 mb-10  max-lg:max-w-xl max-lg:mx-auto">Welcome to our blog section, where knowledge meets inspiration. Explore insightful articles, expert tips, and the latest trends in our field.</p>
                    <a href="javascript:;" class="cursor-pointer border border-gray-300 shadow-sm rounded-full py-3.5 px-7 w-52 lg:mx-0 mx-auto flex justify-center text-gray-900 font-semibold transition-all duration-300 hover:bg-gray-100">View All</a>
                  </div>
                     <!-- Slider controls -->
                     <div class="flex items-center lg:justify-start justify-center lg:mt-0 mt-8 gap-8 mb-4">
                      <button id="slider-button-left" class="swiper-button-prev group flex justify-center items-center border border-solid border-indigo-600 w-11 h-11 transition-all duration-500 rounded-full hover:bg-indigo-600" data-carousel-prev>
                          <svg class="h-6 w-6 text-indigo-600 group-hover:text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M20.9999 12L4.99992 12M9.99992 6L4.70703 11.2929C4.3737 11.6262 4.20703 11.7929 4.20703 12C4.20703 12.2071 4.3737 12.3738 4.70703 12.7071L9.99992 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                              </svg>
                              
                      </button>
                      <button id="slider-button-right" class="swiper-button-next group flex justify-center items-center border border-solid border-indigo-600 w-11 h-11 transition-all duration-500 rounded-full hover:bg-indigo-600" data-carousel-next>
                          <svg class="h-6 w-6 text-indigo-600 group-hover:text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M3 12L19 12M14 18L19.2929 12.7071C19.6262 12.3738 19.7929 12.2071 19.7929 12C19.7929 11.7929 19.6262 11.6262 19.2929 11.2929L14 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                              </svg>
                              
                      </button>
                  </div>
                </div>




                <div class="w-full lg:w-3/5">
                    <!--Slider wrapper-->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide w-full max-lg:max-w-xl lg:w-1/2 group">
                                <div class="flex items-center mb-9">
                                    <img src="https://pagedone.io/asset/uploads/1696244059.png" alt="blogs tailwind section" class="rounded-2xl w-full">
                                </div>
                                <h3 class="text-xl text-gray-900 font-medium leading-8 mb-4 group-hover:text-indigo-600">Clever ways to invest in product to organize your portfolio</h3>
                                <p class="text-gray-500 leading-6 transition-all duration-500 mb-8">
                                    Discover smart investment strategies to streamline and organize your portfolio. Explore innovative approaches to optimize your...
                                </p>
                                <a href="javascript:;" class="cursor-pointer flex items-center gap-2 text-lg text-indigo-700 font-semibold">
                                    Read more<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.25 6L13.25 6M9.5 10.5L13.4697 6.53033C13.7197 6.28033 13.8447 6.15533 13.8447 6C13.8447 5.84467 13.7197 5.71967 13.4697 5.46967L9.5 1.5" stroke="#4338CA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                      </a>
                            </div>
                            <div class="swiper-slide w-full max-lg:max-w-xl lg:w-1/2 group">
                                <div class="flex items-center mb-9">
                                    <img src="https://pagedone.io/asset/uploads/1696244074.png" alt="blogs tailwind section" class="rounded-2xl w-full">
                                </div>
                                <h3 class="text-xl text-gray-900 font-medium leading-8 mb-4 group-hover:text-indigo-600">How to grow your profit through systematic investment with us</h3>
                                <p class="text-gray-500 leading-6 transition-all duration-500 mb-8">
                                    Unlock the power of systematic investment with us and watch your profits soar. Our expert team will guide you on the path to financial..
                                </p>
                                <a href="javascript:;" class="cursor-pointer flex items-center gap-2 text-lg text-indigo-700 font-semibold">
                                    Read more<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.25 6L13.25 6M9.5 10.5L13.4697 6.53033C13.7197 6.28033 13.8447 6.15533 13.8447 6C13.8447 5.84467 13.7197 5.71967 13.4697 5.46967L9.5 1.5" stroke="#4338CA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                      </a>
                            </div>
                            <div class="swiper-slide w-full max-lg:max-w-xl lg:w-1/2 group">
                                <div class="flex items-center mb-9">
                                    <img src="https://pagedone.io/asset/uploads/1696244059.png" alt="blogs tailwind section" class="rounded-2xl w-full">
                                </div>
                                <h3 class="text-xl text-gray-900 font-medium leading-8 mb-4 group-hover:text-indigo-600">Clever ways to invest in product to organize your portfolio</h3>
                                <p class="text-gray-500 leading-6 transition-all duration-500 mb-8">
                                    Discover smart investment strategies to streamline and organize your portfolio. Explore innovative approaches to optimize your...
                                </p>
                                <a href="javascript:;" class="cursor-pointer flex items-center gap-2 text-lg text-indigo-700 font-semibold">
                                    Read more<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.25 6L13.25 6M9.5 10.5L13.4697 6.53033C13.7197 6.28033 13.8447 6.15533 13.8447 6C13.8447 5.84467 13.7197 5.71967 13.4697 5.46967L9.5 1.5" stroke="#4338CA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                      </a>
                            </div>
                            <div class="swiper-slide w-full max-lg:max-w-xl lg:w-1/2 group">
                                <div class="flex items-center mb-9">
                                    <img src="https://pagedone.io/asset/uploads/1696244074.png" alt="blogs tailwind section" class="rounded-2xl w-full">
                                </div>
                                <h3 class="text-xl text-gray-900 font-medium leading-8 mb-4 group-hover:text-indigo-600">How to grow your profit through systematic investment with us</h3>
                                <p class="text-gray-500 leading-6 transition-all duration-500 mb-8">
                                    Unlock the power of systematic investment with us and watch your profits soar. Our expert team will guide you on the path to financial..
                                </p>
                                <a href="javascript:;" class="cursor-pointer flex items-center gap-2 text-lg text-indigo-700 font-semibold">
                                    Read more<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1.25 6L13.25 6M9.5 10.5L13.4697 6.53033C13.7197 6.28033 13.8447 6.15533 13.8447 6C13.8447 5.84467 13.7197 5.71967 13.4697 5.46967L9.5 1.5" stroke="#4338CA" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                      </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
   <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 2,
            spaceBetween: 28,
            centeredSlides: false,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                    centeredSlides: false,
                },
                568: {
                    slidesPerView: 2,
                    spaceBetween: 28,
                    centeredSlides: false,
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 28,
                    centeredSlides: false,
                },
                1024: {
                    slidesPerView: 2,
                    spaceBetween: 32,
                },
            },
        });
    </script>

HTML Copy

Three column blog with image

Let users see three blogs in one row with title description, image and CTA links.

Preview
Code

Figma File

                                                <section class="py-24 ">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 class="font-manrope text-4xl font-bold text-gray-900 text-center mb-16">Our latest  blog</h2>
          <div class="flex justify-center  gap-y-8 lg:gap-y-0 flex-wrap md:flex-wrap lg:flex-nowrap lg:flex-row lg:justify-between lg:gap-x-8">
             <div class="group w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl">
              <div class="flex items-center">
                  <img src="https://pagedone.io/asset/uploads/1696244317.png" alt="blogs tailwind section" class="rounded-t-2xl w-full">
              </div>
              <div class="p-4 lg:p-6 transition-all duration-300 rounded-b-2xl group-hover:bg-gray-50">
                  <span class="text-indigo-600 font-medium mb-3 block">Jan 01, 2023</span>
                  <h4 class="text-xl text-gray-900 font-medium leading-8 mb-5">Clever ways to invest in product to organize your portfolio</h4>
                  <p class="text-gray-500 leading-6 mb-10">Discover smart investment strategies to streamline and organize your portfolio..</p>
                  <a href="javascript:;" class="cursor-pointer text-lg text-indigo-600 font-semibold">Read more..</a>
              </div>
             </div>
             <div class="group w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl">
              <div class="flex items-center">
                  <img src="https://pagedone.io/asset/uploads/1696244340.png" alt="blogs tailwind section" class="rounded-t-2xl w-full">
              </div>
              <div class="p-4 lg:p-6 transition-all duration-300 rounded-b-2xl group-hover:bg-gray-50">
                  <span class="text-indigo-600 font-medium mb-3 block">Feb 01, 2023</span>
                  <h4 class="text-xl text-gray-900 font-medium leading-8 mb-5">How to grow your profit through systematic investment with us</h4>
                  <p class="text-gray-500 leading-6 mb-10">Unlock the power of systematic investment with us and watch your profits soar. Our..</p>
                  <a href="javascript:;" class="cursor-pointer text-lg text-indigo-600 font-semibold">Read more..</a>
              </div>
             </div>
             <div class="group w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl">
              <div class="flex items-center">
                  <img src="https://pagedone.io/asset/uploads/1696244356.png" alt="blogs tailwind section" class="rounded-t-2xl w-full">
              </div>
              <div class="p-4 lg:p-6 transition-all duration-300 rounded-b-2xl group-hover:bg-gray-50">
                  <span class="text-indigo-600 font-medium mb-3 block">Mar 01, 20233</span>
                  <h4 class="text-xl text-gray-900 font-medium leading-8 mb-5">How to analyze every holdings of your portfolio</h4>
                  <p class="text-gray-500 leading-6 mb-10">Our comprehensive guide will equip you with the tools and insights needed to..</p>
                  <a href="javascript:;" class="cursor-pointer text-lg text-indigo-600 font-semibold">Read more..</a>
              </div>
             </div>
          </div>
        </div>
    </section>

HTML Copy

Three column with border

This style of Tailwind CSS Blog section is very similar to the above style, the only difference here is each of the blogs will have its own border and boxed look. Rest of the details like image, title, description and buttons will remain same.

Preview
Code

Figma File

                                                <section class="py-24 ">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 class="font-manrope text-4xl font-bold text-gray-900 text-center mb-14">Our popular blogs</h2>
          <div class="flex justify-center mb-14 gap-y-8 lg:gap-y-0 flex-wrap md:flex-wrap lg:flex-nowrap lg:flex-row lg:justify-between lg:gap-x-8">
             <div class="group cursor-pointer w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl p-5 transition-all duration-300 hover:border-indigo-600">
              <div class="flex items-center mb-6">
                  <img src="https://pagedone.io/asset/uploads/1696244553.png" alt="Harsh image" class="rounded-lg w-full">
              </div>
              <div class="block">
                  <h4 class="text-gray-900 font-medium leading-8 mb-9">Fintech 101: Exploring the Basics of Electronic Payments</h4>
                  <div class="flex items-center justify-between  font-medium">
                      <h6 class="text-sm text-gray-500">By Harsh C.</h6>
                      <span class="text-sm text-indigo-600">2 year ago</span>
                  </div>
              </div>
             </div>
             <div class="group cursor-pointer w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl p-5 transition-all duration-300 hover:border-indigo-600">
              <div class="flex items-center mb-6">
                  <img src="https://pagedone.io/asset/uploads/1696244579.png" alt="John image" class="rounded-lg w-full">
              </div>
              <div class="block">
                  <h4 class="text-gray-900 font-medium leading-8 mb-9">From Classroom to Cyberspace: The Growing Influence of EdTech in Fintech</h4>
                  <div class="flex items-center justify-between  font-medium">
                      <h6 class="text-sm text-gray-500">By John D.</h6>
                      <span class="text-sm text-indigo-600">2 year ago</span>
                  </div>
              </div>
             </div>
             <div class="group cursor-pointer w-full max-lg:max-w-xl lg:w-1/3 border border-gray-300 rounded-2xl p-5 transition-all duration-300 hover:border-indigo-600">
              <div class="flex items-center mb-6">
                  <img src="https://pagedone.io/asset/uploads/1696244619.png" alt="Alexa image" class="rounded-lg w-full">
              </div>
              <div class="block">
                  <h4 class="text-gray-900 font-medium leading-8 mb-9">Fintech Solutions for Student Loans: Easing the Burden of Education Debt</h4>
                  <div class="flex items-center justify-between  font-medium">
                      <h6 class="text-sm text-gray-500">By Alexa H.</h6>
                      <span class="text-sm text-indigo-600">2 year ago</span>
                  </div>
              </div>
             </div>
          </div>
          <a href="javascript:;" class="cursor-pointer border border-gray-300 shadow-sm rounded-full py-3.5 px-7 w-52 flex justify-center items-center text-gray-900 font-semibold mx-auto transition-all duration-300 hover:bg-gray-100">View All</a>
        </div>
    </section>

HTML Copy

Theree column with tag overlap

This Tailwind CSS Blog example can be used to add a date tag over a picture from a blog post.

Preview
Code

Figma File

Tailwind Blog Post with gradient hover

This tailwind blog example has a gradient overlay on hover and a tint overlay on image, to give your blog post design a fresh look.

Preview
Code

Figma File

Horizontal blog post

This example of Tailwind CSS Blog layout can be used to create horizontal blog card, description will be kept on the right and images will be on the left.

Preview
Code

Figma File

Blog post with horizontal single column

This single blog full page design has image, blog title, description and call to action button.

Preview
Code

Figma File

Alternate blog post

This tailwind blog layout style is unique as it lets you display cards horizontally as well as vertically with image, heading, description and CTA buttons.

Preview
Code

Figma File

Two column blog post with name overlap

Another simple and trending design of Tailwind blog component which has two blogs in one row with title, description and call to action buttons, it will have author name, date and subject overlapping on the blog image.

Preview
Code

Figma File

Simple blog post

A normal and simple Tailwind blog post which carries blogs, heading, description and CTA buttons.

Preview
Code

Figma File

Blog with expanded card

Whenever you wish to show more details this tailwind blog card design can be used as it lets you expand one of the cards horizontally.

Preview
Code

Figma File

Blog post with feature list

Using this tailwind css newsletter style you can list out the features with your blog posts.

Preview
Code

Figma File

Blog post with badge

This style of Tailwind CSS blog enables you to add badge in your blog along with image, heading and description.

Preview
Code

Figma File

Tailwind Blog card with two columns and image

This tailwind css blog style lets you show two blog cards in one row with big image, heading, author name and publication date.

Preview
Code

Figma File

Different grid layout with opacity effect

This style of Tailwind CSS blog post enables you to add grid layout heading, description, CTA button with opacity hover effect.

Preview
Code

Figma File

Blogs with card layout and scale effect

This style of Tailwind CSS blog component enables you to add card layout with scale effect, heading and description.

Preview
Code

Figma File

Tailwind Blog with creative image layout

You can use this tailwind blog example if you want to show a heading, description next to an arrow button and creative image layout.

Preview
Code

Figma File

Tailwind Blog with gradient background

This tailwind css newsletter example has a gradient background with heading, description and button.

Preview
Code

Figma File

Tailwind blog grid layout with scale effect

This Tailwind CSS Blog example can be used to create grid layout with badge, heading, description and scale layout image.

Preview
Code

Figma File

Tailwind blog with Horizontal cards

This example of Tailwind CSS Blog layout can be used to create expanded one card horizontal and also horizontal blog cards, description will be kept on the right and images will be on the left.

Preview
Code

Figma File

Tailwind cards with different layout

This style of Tailwind CSS blog page enables you to add different cards layout with heading, description, link and background image.

Preview
Code

Figma File

Tailwind blog with different card layout

This Tailwind CSS Blog example can be used to create one full card with background image and other different cards layout.

Preview
Code

Figma File

Tailwind blog cards with slider

This style of Tailwind CSS blog component enables you to add slider with heading, description, left and right arrow buttons and also add cards with background opacity with text.