Fleetbase-Mirror-Repo/console/app/components/fleetbase-blog.hbs

<div class="fleetbase-blog" ...attributes>
    <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
        <div class="flex flex-row items-center justify-between rounded-t-lg px-4 py-2 border-b border-gray-200 dark:border-gray-700">
            <span class="text-base font-bold text-black dark:text-gray-100">Fleetbase Blog</span>
            <a href="https://www.fleetbase.io/blog" target="_blog" class="flex flex-row items-center text-sm">
                <FaIcon @icon="arrow-up-right-from-square" @size="xs" class="mr-2" />
                <span>Visit Blog</span>
            </a>
        </div>
        <div class="px-4 py-2.5">
            {{#if this.isLoading}}
                <Spinner />
            {{else}}
                <ul class="space-y-2">
                    {{#each this.posts as |post|}}
                        <li class="text-sm flex flex-col lg:flex-row">
                            <a href={{post.link}} target="_blog" class="text-black truncate max-w-lg dark:text-gray-200">
                                <span class="truncate">{{post.title}}</span>
                            </a>
                            <span class="ml-1 text-gray-900 dark:text-gray-400">- {{post.pubDate}}</span>
                        </li>
                    {{/each}}
                </ul>
            {{/if}}
        </div>
    </div>
</div>