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

Battery and signal
Battery and signal bar component

Author:
ardianhu

1 year ago

1k
Profile Card

Author:
Crimson

1 year ago

1.6k
card
It's a product card

Author:
SAURAV SINGH

10 months ago

1.2k
Product Card

Author:
Maxim

10 months ago

1.7k
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

1 year ago

1k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

3 years ago

10.5k
content section

Author:
Crimson

1 year ago

959
Event notification card

Author:
Odessa Young

3 years ago

9.6k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

18.5k
Highlights - Speakers Section

Author:
ABDO-SY

10 months ago

880
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.5k
Smooth Scale & Float Reveal
An enhanced scroll interaction that combines a vertical slide with a subtle scaling effect. As elements enter the viewport, they smoothly float up and scale to their full size, creating a polished, modern depth effect without complex libraries.

Author:
Juan D. Cortorreal

2 months ago

279

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components