list of beers - punk api

postman visualizer

<div class='mt-5 grid gap-10 grid-cols-1 md:grid-cols-3'>
        {{#each response}}
            <div class='flex justify-center items-end bg-slate-50 shadow-lg relative'>
                <div class='p-8 w-full flex items-center flex flex-col'>
                    <img src={{image_url}} class='w-64 h-64 object-contain' />
                    <h3 class='text-3xl my-5 font-bold'>{{name}}</h3>
                    <span class='flex justify-between w-full'>
                        <span>ABV: {{abv}}%</span>
                        <span>IBU: {{ibu}}%</span>
                    </span>
                </div>
                <div class='absolute top-0 left-0 p-10 bg-slate-50 overflow-auto cursor-pointer w-full h-full opacity-0 transition duration-150 ease-out hover:opacity-90 leading-normal'>
                    <div class='text-4xl md:text-5xl tracking-tight leading-relaxed font-bold'>{{name}}</div>
                    <div class='pb-2 italic border-b-[2px] border-blue-500'>{{tagline}}</div>
                    <div class='my-6'>{{description}}</div>
                    <div>
                        Pair with: {{food_pairing}}
                    </div>
                </div>
            </div>
        {{/each}}
    </div>