Home
wtfbrh
Image Classification Models Response Grid

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 CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Grid Blog Card

Author wtfbrh

1.2k

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