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

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

File Upload

Author:
Rajesh Maheshwari

1 year ago

1k
credit card checkout

Author:
Antony

2 years ago

3.5k
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

1 year ago

977
Article card

Author:
Sienna

3 years ago

10k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

872
card
best responsive tailwind card

Author:
irahoza daniel

9 months ago

855
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

24.1k
Product card

Author:
Simon Scheffer

3 years ago

31.7k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

10 months ago

1.4k
Basic US Flag Card
Here's a set of card components styled with Tailwind CSS that represent various US-themed elements:

Author:
Uwase Alliance

9 months ago

641
Card for user contact

Author:
achelton pambo

1 year ago

2.8k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components