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

12.8k

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

1 year ago

7.7k
Invoice template

Author:
Shakti

1 year ago

25.1k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

15.7k
Google map iframe with tailwind

Author:
Kofi Osei

1 year ago

19k
background animation
background animation

Author:
Anonymous

1 year ago

38.9k
Sticky fullpage pages / slides

Author:
Laurits

1 year ago

13.3k
Privacy Policy
Privacy Policy

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

165
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

1 week ago

126
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

9.9k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

6 months ago

1.7k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

16.9k
Icon group

Author:
Conan Hilton

1 year ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components