Home
Noob
Articles Card Grid

Articles Card Grid

This tailwind example is contributed by Noob, on 24-Jul-2022. 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 Noob

9.8k

Fork Fullscreen

<div class="flex items-center justify-center w-screen min-h-screen p-10">
    
    <div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl">
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
        
        <div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
            <div class="h-40 bg-gray-400 rounded-lg"></div>
            <div class="flex flex-col items-start mt-4">
                <h4 class="text-xl font-semibold">Heading</h4>
                <p class="text-sm">Some text about the thing that goes over a few lines.</p>
                <a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click
                    Here</a>
            </div>
        </div>
    </div>
    
</div>

Related Examples