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

1.2k

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
Card

Author:
Aman kumar

1 year ago

1.2k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.5k
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

8.7k
Astro build starter template with Tailwind
Astro build starter template with Tailwind

Author:
Geoffrey Callaghan

1 year ago

3.3k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

499
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

11 months ago

1.7k
cards
cards with background animation

Author:
Anonymous

1 year ago

2.4k
Chat Bot

Author:
Md. Tofayel islam

3 weeks ago

164
Blog page

Author:
Ron Hicks

2 years ago

11.3k
Card with full width image
centered content

Author:
Mr Robot

2 years ago

10k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.2k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

440

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components