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

1.4k

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