Fancy blog post card

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

Card

Author Mr Robot

Tailwind v3.4 13.4k 16

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

Santos78

3 years ago

33.1k
Tailwind image card with text above it

I.P. Leroy

3 years ago

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

Noah Schmidt

3 years ago

16.9k
Tailwind card

Conan Hilton

3 years ago

14.4k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

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

Mr Robot

3 years ago

14.1k
Hover effect card

Samuel Dawson

3 years ago

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

Amit Pachange

4 years ago

53.8k
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:

Prashant

4 years ago

65.6k
section card

Raul antonio de la cruz hernandez

8 months ago

680
card Alert - icons - glass

ABDO-SY

1 year ago

1.5k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.5k