Home
Jaber Zarif
Showcase Card

Showcase Card

This tailwind example is contributed by Jaber Zarif, on 12-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Jaber Zarif

2.6k

Fork Fullscreen

<div class="flex flex-col justify-center items-center h-[100vh] w-full bg-gray-200">
            <div
                class="bg-white relative flex max-w-[500px] w-full flex-col rounded-[10px] border-[1px] border-gray-200 bg-white bg-clip-border shadow-md dark:border-[#ffffff33] dark:!bg-navy-800 dark:text-white dark:shadow-none"
            >
                <div class="!z-5 relative flex h-full w-full flex-col rounded-[20px] bg-white bg-clip-border p-4  dark:!bg-navy-800 dark:text-white dark:shadow-none">
                    <div class="mb-8 w-full">
                        <h4 class="text-xl font-bold text-navy-700 dark:text-white">
                        All projects
                        </h4>
                        <p class="mt-2 text-base text-gray-600">
                        Here you can find more details about your projects. Keep you user
                        engaged by providing meaningful information.
                        </p>
                    </div>
                    <div class="flex w-full items-center justify-between rounded-2xl bg-white p-3 shadow-3xl 500 dark:!bg-navy-700 dark:shadow-none">
                        <div class="flex items-center">
                        <div class="">
                            <img
                            class="h-[83px] w-[83px] rounded-lg object-cover"
                            src="https://www.eurotechconseil.com/wp-content/uploads/2022/02/article-php.webp"
                            alt=""
                            />
                        </div>
                        <div class="ml-4">
                            <p class="text-base font-medium text-navy-700 dark:text-white">
                            Task Tracker Project
                            </p>
                            <p class="mt-2 text-sm text-gray-600">
                            Project #1 .
                            <a
                                class="ml-1 font-medium text-brand-500 hover:text-brand-500 dark:text-white hover:text-blue-500 hover:underline"
                                href=" "
                            >
                                See details
                            </a>
                            </p>
                        </div>
                        </div>
                    </div>
                    <div class="mt-3 flex w-full items-center justify-between rounded-2xl bg-white p-3 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
                        <div class="flex items-center">
                        <div class="">
                            <img
                            class="h-[83px] w-[83px] rounded-lg object-cover"
                            src="https://www.eurotechconseil.com/wp-content/uploads/2022/02/article-php.webp"
                            alt=""
                            />
                        </div>
                        <div class="ml-4">
                            <p class="text-base font-medium text-navy-700 dark:text-white">
                                Detect Internet Speed Test
                            </p>
                            <p class="mt-2 text-sm text-gray-600">
                            Project #2 .
                            <a
                                class="ml-1 font-medium text-brand-500 hover:text-brand-500 dark:text-white hover:text-blue-500 hover:underline"
                                href=" "
                            >
                                See details
                            </a>
                            </p>
                        </div>
                        </div>
                    </div>
                    <div class="mt-3 flex w-full items-center justify-between rounded-2xl bg-white p-3 shadow-3xl shadow-shadow-500 dark:!bg-navy-700 dark:shadow-none">
                        <div class="flex items-center">
                        <div class="">
<img
                            class="h-[83px] w-[83px] rounded-lg object-cover"
                            src="https://www.eurotechconseil.com/wp-content/uploads/2022/02/article-php.webp"
                            alt=""
                            />
                        </div>
                        <div class="ml-4">
                            <p class="text-base font-medium text-navy-700 dark:text-white">
                            AI Image Generator Website
                            </p>
                            <p class="mt-2 text-sm text-gray-600">
                            Project #3 .
                            <a
                                class="ml-1 font-medium text-brand-500 hover:text-brand-500 dark:text-white hover:text-blue-500 hover:underline"
                                href=" "
                            >
                                See details
                            </a>
                            </p>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Related Examples

Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.4k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

3k
Hotel rooms
A simple room overview

Author:
Matti

1 year ago

1.5k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.7k
Dynamic Google Card

Author:
Cristian

11 months ago

1.1k
profile card
card

Author:
Tofayel Islam

1 month ago

21
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)

8 months ago

1.1k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

10 months ago

1.3k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.3k
Services
Card Services Section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
3d card
the Best 3D card with tailwind css

Author:
irahoza daniel

7 months ago

482
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

9 months ago

984

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components