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

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

Personal card
A card to show minimal info for staff member

Author:
farid

8 months ago

712
Best incamas to date

Author:
ORGIN_DREAMS

4 months ago

431
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

1 year ago

2.4k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

8 months ago

1.7k
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

2k
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.4k
Form
form

Author:
Aman kumar

1 year ago

1.6k
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

1 year ago

1.8k
Info card

Author:
Samuel Dawson

2 years ago

10k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

11 months ago

1.5k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

4 months ago

831
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components