Image Classification Models Response Grid

Forked from @noob_dev/articles-card-grid

by AI Without Borders

This tailwind example is contributed by wtfbrh, on 07-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author wtfbrh

Tailwind v3.4 2k 8

Fork Fullscreen

<div class="flex items-center justify-center w-screen min-h-screen p-10">
    
    <div class="grid xl:grid-cols-5 md:grid-cols-5 grid-cols-1 gap-0">
        
        <div
            class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
            <div
                class="-m-4 h-24 bg-neutral-700 rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:shadow-neutral-200">
                <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1:</span>
                <span
  class="flex w-28 mx-auto  tracking-wide items-center justify-center rounded-full bg-green-100 px-2.5 py-0.5 text-green-700 group-hover:bg-green-200"
>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
  <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">REAL</p>
</span>
            </div>
            <div>

<div class="mt-4 relative -mx-4 bg-neutral-800">
                    <div class="w-full bg-neutral-400 rounded-none h-8">
                        <div class="bg-green-400 h-full rounded-none" style="width: 88%">
                            <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                <span class="ml-1 font-medium font-mono">0.88</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-col items-start">
                <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
                <hr class="py-px my-2  w-full bg-neutral-700" />
                <div class="text-xs font-mono">Some text about the thing that goes over a few lines.</div>

<hr class="py-px mt-6  w-full bg-neutral-700" />
                <a class="mt-2 text-[0.66rem] tracking-wide">model/name</a>
            </div>
        </div>
        
        <div
            class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
            <div
                class="-m-4 h-24 bg-neutral-700 rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:shadow-neutral-200">
                <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 2:</span>
                <span
  class="flex w-24 mx-auto  tracking-wide items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700 group-hover:bg-red-200"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
  <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>

<div class="mt-4 relative -mx-4 bg-neutral-800">
                    <div class="w-full bg-neutral-400 rounded-none h-8">
                        <div class="bg-red-400 h-full rounded-none" style="width: 70%">
                            <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                <span class="ml-1 font-medium font-mono">0.70</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex flex-col items-start">
                <h4 class="mt-4 text-sm font-semibold tracking-wide">ViT Based</h4>
                <hr class="py-px my-2  w-full bg-neutral-700" />
                <div class="text-xs font-mono">Some text about the thing that goes over a few lines.</div>

<hr class="py-px mt-6  w-full bg-neutral-700" />
                <a class="mt-2 text-[0.66rem] tracking-wide">model/name</a>
            </div>
        </div>
        
               <div
            class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
            <div
                class="-m-4 h-24 bg-neutral-700 rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:shadow-neutral-200">
                <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1:</span>
                <span
  class="flex w-28 mx-auto  tracking-wide items-center justify-center rounded-full bg-green-100 px-2.5 py-0.5 text-green-700 group-hover:bg-green-200"
>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
  <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">REAL</p>
</span>
            </div>
            <div>

<hr class="py-px mt-6  w-full bg-neutral-700" />
                <a class="mt-2 text-[0.66rem] tracking-wide">model/name</a>
            </div>
        </div>
        
               <div
            class="group flex flex-col bg-neutral-300 rounded-sm p-4 m-1 border border-neutral-800 shadow-xs transition hover:shadow-lg dark:shadow-gray-700/25">
            <div
                class="-m-4 h-24 bg-neutral-700 rounded-sm rounded-b-none transition border group-hover:border-gray-100 group-hover:shadow-lg group-hover:shadow-neutral-200">
                <span class="text-neutral-300 font-mono tracking-widest p-4 pb-3 block text-xs text-center">MODEL 1:</span>
                <span
  class="flex w-28 mx-auto  tracking-wide items-center justify-center rounded-full bg-green-100 px-2.5 py-0.5 text-green-700 group-hover:bg-green-200"
>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="size-5 mr-2 -ml-3 group-hover:animate group-hover:animate-pulse">
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
  <p class="whitespace-nowrap text-lg leading-normal font-bold text-center self-center align-middle py-px">REAL</p>
</span>
            </div>
            <div>

<hr class="py-px mt-6  w-full bg-neutral-700" />
                <a class="mt-2 text-[0.66rem] tracking-wide">model/name</a>
            </div>
        </div>
    
</div>
</div>

Related Examples

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

622
card design
card design

Tanvir Hasan Bappy (Tanvir)

9 months ago

653
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.4k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

3 years ago

20.2k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k
Product features cards

Henrik R.

2 years ago

4.8k
Blog Card

ariaw

11 months ago

875
products, show, items
display images, card, products

Rushikesh Latpate

9 months ago

850
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Vikas Kushwah

1 year ago

2.1k
Card animate

Raul antonio de la cruz hernandez

1 year ago

2k
Responsive data cards

EliteAI Tools

1 year ago

2.3k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k