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

10.8k

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

1 year ago

27.4k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

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

Author:
Noah Schmidt

1 year ago

14.4k
Tailwind card

Author:
Conan Hilton

2 years ago

11.2k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

2 years ago

11.8k
Hover effect card

Author:
Samuel Dawson

1 year ago

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

2 years ago

45.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:

Author:
Prashant

2 years ago

57.2k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

2 months ago

558
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

1 year ago

11.7k
Labs card
Lab item list card

Author:
Sedat Kumcu

2 months ago

793

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components