Home
Mr Robot
Fancy blog post card

Fancy blog post card

This tailwind example is contributed by Mr Robot, on 14-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Mr Robot

12.7k

Fork Fullscreen

<a href="#">
            <img class="w-full" src="https://images.pexels.com/photos/5120892/pexels-photo-5120892.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=625.0&amp;sharp=10&amp;w=1000" alt="Sunset in the mountains">
        </a>
        <div class="relative -mt-16 px-10 pt-5 pb-16 bg-white m-10">
            <a href="#"
                class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out inline-block mb-2">The
                Best Activewear from the Nordstrom Anniversary Sale</a>
            <p class="text-gray-500 text-sm">
                Today, I’m covering one of my favorite parts of the Nordstrom Anniversary Sale: the activewear!
            </p>
            <p class="mt-5 text-gray-600 text-xs">
                By
                <a href="#" class="text-xs text-indigo-600 transition duration-500 ease-in-out">
                    Mehdi Ahmadi
                </a> | in <a href="#" class="text-xs text-indigo-600 transition duration-500 ease-in-out">
                    Cooking
                </a>, <a href="#" class="text-xs text-indigo-600 transition duration-500 ease-in-out">
                    Recipe
                </a>
            </p>
        </div>

</div>

Related Examples

Image card with overlay text overlay

Author:
Santos78

3 years ago

32.1k
Tailwind image card with text above it

Author:
I.P. Leroy

2 years ago

25.4k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16.4k
Tailwind card

Author:
Conan Hilton

3 years ago

13.8k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.8k
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.

Author:
Mr Robot

3 years ago

13.9k
Hover effect card

Author:
Samuel Dawson

3 years ago

32.3k
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

3 years ago

52.2k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Author:
Prashant

3 years ago

64.3k
Card grid for posts

Author:
Mr Robot

3 years ago

22.9k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

10 months ago

1.4k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components