Home
$@(\/)(\/)Y
News Feed

News Feed

This tailwind example is contributed by $@(\/)(\/)Y, on 13-Jan-2025. Component is made with Tailwind CSS v3. 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

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

Author $@(\/)(\/)Y

608

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="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="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="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

Card with social media share buttons

Author:
Computer guy

1 year ago

8.2k
Shoping Cart Popup

Author:
ABDO-SY

1 month ago

350
Image cards

Author:
Reuben Enahoro

5 months ago

923
Showcase Card

Author:
Jaber Zarif

9 months ago

1.7k
Blog

Author:
Crimson

3 months ago

707
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

2 years ago

16.1k
Info Card

Author:
Prem..

2 years ago

18.1k
Group hover card
article card

Author:
Sienna

2 years ago

10.8k
Product review card

Author:
Moriba Traore

2 years ago

14.6k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

48.8k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

1 week ago

21
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

1 week ago

133

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components