Home
Bunny
News feed

News feed

This tailwind example is contributed by Bunny, on 05-Jun-2023. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Bunny

13.3k

Fork Fullscreen

<div class="bg-white rounded-lg shadow-md border p-4">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image">
                <div>
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-500 text-sm">Published on June 17, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 mb-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci
                fermentum, viverra erat at, accumsan elit. Proin ultrices auctor nisl, eu facilisis lectus condimentum
                eu.
            </p>
            <div class="flex justify-end">
                <a href="#" class="text-blue-500 font-semibold">Read More</a>
            </div>
        </div>

<div class="bg-white rounded-lg shadow-md border p-4 mt-4">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Profile Image">
                <div>
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-500 text-sm">Published on June 15, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 mb-4">Ut tincidunt arcu ut mauris gravida, ac volutpat justo tristique. Phasellus ut
                pharetra velit. Nullam vel justo id felis tincidunt venenatis. Proin id ligula ut dui rhoncus feugiat.
            </p>
            <div class="flex justify-end">
                <a href="#" class="text-blue-500 font-semibold">Read More</a>
            </div>        </div>
    </div>
</div>

Related Examples

Question & Answer
questions and answers

Author:
Anonymous

2 years ago

8.4k
Invoice template

Author:
Shakti

2 years ago

27.2k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.2k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.9k
background animation
background animation

Author:
Anonymous

2 years ago

47.7k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

500
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

2 months ago

800
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

Author:
SHARIFUL ISLAM

6 months ago

1.1k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

4 months ago

530
Contact Page

Author:
Sedat Kumcu

10 months ago

1.1k
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

1 month ago

163
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

3 months ago

495

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components