hugoWebsite/layouts/partials/posts-template.html

<div class="mx-auto text-gray-900 max-w-7xl dark:text-gray-50">
    <div class="px-4 not-prose">
        <div class="grid gap-4 mx-auto mt-12 mb-4 lg:max-w-none md:grid-cols-3">
            {{ range .Paginator.Pages }}
            <div class="flex flex-col overflow-hidden rounded-lg shadow-lg bg-gray-50 dark:bg-gray-900">
                <a href="{{.Permalink}}">
                    {{ with .Params.featured_image }}
                    {{ with resources.Get . }}
                    {{ $postimage := (.Resize "500x webp q90").RelPermalink }}
                    <img src="{{ $postimage }}" class="object-fill overflow-hidden rounded-t-lg" width="100%" height=""
                         loading="lazy" alt="{{ .Title }}" />

                    {{ end }}
                    {{ end }}
                </a>
                <div class="p-6">
                    <div class="flex-1">
                        <a href="{{.Permalink}}"
                           class="block mt-2 text-2xl font-black text-gray-900 dark:text-gray-200 hover:text-primary-600 dark:hover:text-primary-500 hover:underline">
                            {{.Title}}
                        </a>
                        <p class="mt-3 text-base text-gray-900 dark:text-gray-300">
                            {{ .Params.summary }}
                        </p>
                    </div>
                    <div class="flex pt-6 font-medium text-primary-600 dark:text-primary-100 text-md">
                        <span class="pr-2 font-black">Tags:</span>
                        <span>
                        {{ range $elem_index, $elem_val := (.GetTerms "tags") }}
                        {{- if gt $elem_index 0 }}, {{ end -}}
                        <a href="{{ .Permalink }}"
                           class="inline-flex items-center rounded-md bg-gray-300 hover:bg-primary-200 hover:text-black px-2.5 py-0.5 text-sm font-medium text-gray-900 capitalize">{{ .LinkTitle }}</a>
                        {{- end -}}
                        </span>
                    </div>
                    <div class="flex items-center mt-6">
                        <div class="flex-shrink-0">
                            <span class="sr-only">{{ .Params.author }}</span>
                            {{ with .Params.authorimage }}
                            {{ with resources.Get . }}
                            {{ $authorimage := (.Resize "400x webp").RelPermalink }}
                            <img class="w-10 h-10 rounded-full" src="{{ $authorimage }}" alt="">
                            {{ end }}
                            {{ end }}
                        </div>
                        <div class="pt-1 ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ .Params.author }}
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-white">
                                <time datetime="2020-02-12">{{.Date.Format "2006-01-02"}}</time>
                                <span aria-hidden="true">&middot;</span>
                                <span>{{ math.Round (div (countwords .Content) 220.0) }}
                                    min read</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>