News Feed

This tailwind example is contributed by $@(\/)(\/)¥, on 13-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are blog page template, article page template,Article Card, Blog page card, Article card

Card Blog post page Blog Card

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 2.4k 5

Fork Fullscreen

<div class="w-full min-h-screen flex flex-col items-center justify-center py-10">
  <span class="text-md md:text-lg font-bold text-[#117278] flex items-center gap-1"><ion-icon name="heart-outline"></ion-icon>Our Insights</span>
  <h2 class="text-4xl sm:text-5xl md:text-7xl text-center chelsea-market-regular font-bold text-[#117278] md:mb-16 mb-10">News Feeds</h2>

<div class="flex flex-col px-6 py-8 border-l border-r border-b">
        
        <div class="flex gap-4 text-sm text-gray-700 font-semibold">
          <span class="flex gap-1 items-center"><ion-icon name="person-outline"></ion-icon>By Sammytg7</span>
          <span class="flex gap-1 items-center"><ion-icon class="-rotate-90" name="pricetags-outline"></ion-icon>TechNews</span>
        </div>
        
        <h3 class="text-2xl md:text-3xl font-semibold text-teal-900 chelsea-market-regular">A Beginner's Guide to Modern Web Design</h3>
        
        <p class="text-md text-gray-500">Step into the world of Tailwind CSS with this beginner-friendly guide. Learn
          the basics of Tailwind's utility classes, responsive design features, and customization options to kickstart
          your journey in modern web design.</p>
      </div>
    </div>

<div class="w-full flex flex-col items-stretch justify-center">
      
      <div class="flex flex-col sm:flex-row gap-6 pb-6 border-b-2 border-gray-100">
        
        <div class="w-full h-[7rem] sm:w-[10rem] sm:h-[10rem] aspect-square rounded-l px-6 py-2 bg-yellow-500 text-white flex flex-col items-center justify-center">
          <span class="text-7xl font-semibold">13</span>
          <span class="font-semibold">January</span>
        </div>
        
        <div class="flex flex-col justify-between">
          
          <div class="flex md:gap-4 gap-2 text-sm text-gray-700 font-semibold">
            <span class="flex gap-1 items-center"><ion-icon name="person-outline"></ion-icon>By Sammytg7</span>
            <span class="flex gap-1 items-center"><ion-icon class="-rotate-90" name="pricetags-outline"></ion-icon>TechNews</span>
          </div>
          
          <h3 class="text-2xl md:text-3xl font-semibold text-teal-900 capitalize chelsea-market-regular">Effortless Styling: Unleashing the Power of
            Tailwind CSS</h3>
          
          <p class="text-md text-gray-500">Discover how Tailwind CSS revolutionizes web development with its
            utility-first approach.</p>
        </div>
      </div>

<div class="flex flex-col sm:flex-row gap-6 pb-6 border-b-2 border-gray-100">
        
        <div class="w-full h-[7rem] sm:w-[10rem] sm:h-[10rem] aspect-square rounded-l px-6 py-2 bg-teal-500 text-white flex flex-col items-center justify-center">
          <span class="text-7xl font-semibold">13</span>
          <span class="font-semibold">January</span>
        </div>
        
        <div class="flex flex-col justify-between">
          
          <div class="flex md:gap-4 gap-2 text-sm text-gray-700 font-semibold">
            <span class="flex gap-1 items-center"><ion-icon name="person-outline"></ion-icon>By Sammytg7</span>
            <span class="flex gap-1 items-center"><ion-icon class="-rotate-90" name="pricetags-outline"></ion-icon>TechNews</span>
          </div>
          
          <h3 class="text-2xl md:text-3xl font-semibold text-teal-900 capitalize chelsea-market-regular">Tailwind CSS Pro Tips: Advanced Techniques for
            Stunning Web Interfaces</h3>
          
          <p class="text-md text-gray-500">Elevate your web design skills with advanced tips and tricks for Tailwind
            CSS. Uncover techniques for optimizing your workflow</p>
        </div>
      </div>

<div class="flex flex-col sm:flex-row gap-6 pb-6 border-b-2 border-gray-100">
        
        <div class="w-full h-[7rem] sm:w-[10rem] sm:h-[10rem] aspect-square rounded-l px-6 py-2 bg-red-500 text-white flex flex-col items-center justify-center">
          <span class="text-7xl font-semibold">13</span>
          <span class="font-semibold">January</span>
        </div>
        
        <div class="flex flex-col justify-between">
          
          <div class="flex md:gap-4 gap-2 text-sm text-gray-700 font-semibold">
            <span class="flex gap-1 items-center"><ion-icon name="person-outline"></ion-icon>By Sammytg7</span>
            <span class="flex gap-1 items-center"><ion-icon class="-rotate-90" name="pricetags-outline"></ion-icon>TechNews</span>
          </div>
          
          <h3 class="text-2xl md:text-3xl font-semibold text-teal-900 capitalize chelsea-market-regular">Responsive Design Made Easy: Harnessing Tailwind
            CSS for Mobile-First Websites</h3>
          
          <p class="text-md text-gray-500">Explore how Tailwind CSS simplifies responsive design for mobile-first
            websites.</p>
        </div>
      </div>

</div>
  </div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Card with image
Blog post card

Mr Robot

3 years ago

11.1k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Card
amazing card

Cristian

1 year ago

2.5k
Card responsive and dark mode grid

Cristian

1 year ago

2.4k
Blog Card

Md. Tofayel islam

1 year ago

2.6k