Open Graph + TailwindCSS

I'm a huge fan of TailwindCSS. Due to its atomic nature, I thought it may be a great idea to provide you with code snippets of Open Graph visualizations. Hope you enjoy them!

It's important to notice that these snippets use both require('@tailwindcss/aspect-ratio') and require('@tailwindcss/line-clamp') plugins from the TailwindCSS team. 

<div class="block bg-white border border-gray-300 rounded-xl overflow-hidden">
    <div class="aspect-w-12 aspect-h-7 relative">
        <div class="absolute left-0 top-0 w-full h-full flex items-center justify-center">
            <img alt="Detected OG Image"
                class="absolute left-0 top-0 w-full h-full object-cover object-center transition duration-50"
                loading="lazy"
                src="https://via.placeholder.com/1084x632.png"
            >
        </div>
    </div>
    <div class="p-4 border-t border-gray-300">
        <p class="text-sm line-clamp-1">This would be your title</p>
        <p class="text-sm text-gray-500 mt-1 line-clamp-2">This would be your description</p>
    </div>
</div>

Twitter-like Large Summary card

The following example contains a Twitter-like summary card (with the big image) written using TailwindCSS:

Detected OG Image

This would be your title

This would be your description

<div class="flex bg-white border border-gray-300 rounded-xl overflow-hidden items-center justify-start">
    <div class="relative w-32 h-32 flex-shrink-0">
        <div class="absolute left-0 top-0 w-full h-full flex items-center justify-center">
            <img alt="Detected OG Image"
                class="absolute left-0 top-0 w-full h-full object-cover object-center transition duration-50"
                loading="lazy"
                src="https://via.placeholder.com/512x512.png"
            >
        </div>
    </div>
    <div class="p-4">
        <p class="text-sm line-clamp-1">This would be your title</p>
        <p class="text-sm text-gray-500 mt-1 line-clamp-2">This would be your description</p>
        <span class="flex items-center justify-start text-gray-500">
        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"></path></svg>
            yourdomain.com
        </span>
    </div>
</div>

Twitter-like Small Summary card

The following example contains a Twitter-like summary card (with the small image) written using TailwindCSS:

Detected OG Image

This would be your title

This would be your description

yourdomain.com 
<div class="block bg-white border border-gray-300 rounded-xl overflow-hidden">
    <div class="aspect-w-12 aspect-h-7 relative">
        <div class="absolute left-0 top-0 w-full h-full flex items-center justify-center">
            <img alt="Detected OG Image"
                class="absolute left-0 top-0 w-full h-full object-cover object-center transition duration-50"
                loading="lazy"
                src="https://via.placeholder.com/1084x632.png"
            >
        </div>
    </div>
    <div class="p-4 border-t border-gray-300 bg-gray-200">
        <p class="text-xs uppercase text-gray-600">yourdomain.com</p>
        <p class="line-clamp-1 font-bold text-lg">This would be your title</p>
        <p class="text-base text-gray-500 mt-1 line-clamp-1">This would be your description</p>
    </div>
</div>

Facebook-like Summary card

The following example contains a Facebook-like summary card written using TailwindCSS:

Detected OG Image

yourdomain.com

This would be your title

This would be your description