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 5

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>