Blog Sections
- Default blog card
- Blog post list with heading
- Centered blog posts
- Blog card with image
- Featured blog post
Get started with a collection of website sections related to the blog area of your website including blog posts, article pages, comments, categories, and more.
Details
html
<link
rel="stylesheet"
href="https://unpkg.com/flowbite-typography@1.0.3/dist/typography.min.css"
/>js
document.head.insertAdjacentHTML('afterbegin', '<link rel="stylesheet" type="text/css" href="https://unpkg.com/flowbite-typography@1.0.3/dist/typography.min.css">')Default blog card
Use this example to show a preview of a blog post including the title, description, category, author, publication date, and CTA link.
Default blog card
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center lg:mb-16 mb-8">
<h2
class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Our Blog
</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
We use an agile approach to test assumptions and connect with the needs
of your audience early and often.
</p>
</div>
<div class="grid gap-8 lg:grid-cols-2">
<article
class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<div class="flex justify-between items-center mb-5 text-gray-500">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
></path>
</svg>
Tutorial
</span>
<span class="text-sm">14 days ago</span>
</div>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">How to quickly deploy a static website</a>
</h2>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
Static websites are now used to bootstrap lots of websites and are
becoming the basis for a variety of tools that even influence both web
designers and developers influence both web designers and developers.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img
class="w-7 h-7 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
alt="Jese Leos avatar"
/>
<span class="font-medium dark:text-white"> Jese Leos </span>
</div>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</article>
<article
class="p-6 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<div class="flex justify-between items-center mb-5 text-gray-500">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
Article
</span>
<span class="text-sm">14 days ago</span>
</div>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Our first project with React</a>
</h2>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
Static websites are now used to bootstrap lots of websites and are
becoming the basis for a variety of tools that even influence both web
designers and developers influence both web designers and developers.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img
class="w-7 h-7 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="Bonnie Green avatar"
/>
<span class="font-medium dark:text-white"> Bonnie Green </span>
</div>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 dark:text-primary-500 hover:underline"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- Block end -->Blog post list with heading
This example can be used to show a list of blog posts alongside a heading with a paragraph.
Blog post list with heading
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="grid gap-8 py-8 px-4 mx-auto max-w-screen-xl lg:gap-16 lg:grid-cols-2 lg:py-16 lg:px-6"
>
<div>
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Our Blog
</h2>
<p class="font-light text-gray-500 dark:text-gray-400 sm:text-xl">
We use an agile approach to test assumptions and connect with the needs
of your audience early and often.
</p>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<article class="pb-6">
<div class="flex justify-between items-center mb-5 text-gray-500">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
></path>
</svg>
Tutorial
</span>
<span class="text-sm">12 days ago</span>
</div>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">How to quickly deploy a static website</a>
</h2>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
Static websites are now used to bootstrap lots of websites and are
becoming the basis for a variety of tools that even influence both web
designers and developers influence both web designers and developers.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img
class="w-7 h-7 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
alt="Michael Gouch portrait"
/>
<span class="font-medium dark:text-white"> Michael Gouch </span>
</div>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</article>
<article class="py-6">
<div class="flex justify-between items-center mb-5 text-gray-500">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
Article
</span>
<span class="text-sm">24 days ago</span>
</div>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Our first project with React</a>
</h2>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
Static websites are now used to bootstrap lots of websites and are
becoming the basis for a variety of tools that even influence both web
designers and developers influence both web designers and developers.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img
class="w-7 h-7 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png"
alt="Neil Sims portrait"
/>
<span class="font-medium dark:text-white"> Neil Sims </span>
</div>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</article>
<article class="pt-6">
<div class="flex justify-between items-center mb-5 text-gray-500">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
Article
</span>
<span class="text-sm">2 months ago</span>
</div>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Those HTML attributes you never use</a>
</h2>
<p class="mb-5 font-light text-gray-500 dark:text-gray-400">
Static websites are now used to bootstrap lots of websites and are
becoming the basis for a variety of tools that even influence both web
designers and developers influence both web designers and developers.
</p>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img
class="w-7 h-7 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
alt="Roberta Casas portrait"
/>
<span class="font-medium dark:text-white"> Roberta Casas </span>
</div>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- Block end -->Centered blog posts
Use this centered style of blog posts list showing only the title, author, publication date, and the number of social media shares.
Centered blog posts
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Our Blog
</h2>
<p
class="mb-8 lg:mb-16 font-light text-gray-500 sm:text-xl dark:text-gray-400"
>
We use an agile approach to test assumptions and connect with the needs
of your audience early and often.
</p>
</div>
<div
class="mx-auto max-w-screen-sm divide-y divide-gray-200 dark:divide-gray-700"
>
<article class="pb-6 text-center">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
></path>
</svg>
Tutorial
</span>
<h2
class="my-4 text-2xl font-bold tracking-tight text-gray-900 md:text-3xl dark:text-white"
>
<a href="#">How to quickly deploy a static website</a>
</h2>
<div
class="flex justify-center items-center space-x-4 text-gray-500 sm:space-x-6"
>
<div class="flex items-center space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
alt="Jese portrait"
/>
<span class="text-lg font-medium text-gray-900 dark:text-white">
Jese Leos
</span>
</div>
<span>March 26</span>
<span>178 shares</span>
</div>
</article>
<article class="py-6 text-center">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
Article
</span>
<h2
class="my-4 text-2xl font-bold tracking-tight text-gray-900 md:text-3xl dark:text-white"
>
<a href="#"
>Short-Form vs. Long-Form Content: Which Is Better for SEO?</a
>
</h2>
<div class="flex justify-center items-center space-x-6 text-gray-500">
<div class="flex items-center space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png"
alt="Karen portrait"
/>
<span class="text-lg font-medium text-gray-900 dark:text-white">
Karen Nelson
</span>
</div>
<span>March 26</span>
<span>178 shares</span>
</div>
</article>
<article class="pt-6 text-center">
<span
class="bg-primary-100 text-primary-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-primary-200 dark:text-primary-800"
>
<svg
class="mr-1 w-3 h-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
clip-rule="evenodd"
></path>
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
</svg>
Article
</span>
<h2
class="my-4 text-2xl font-bold tracking-tight text-gray-900 md:text-3xl dark:text-white"
>
<a href="#"
>5 Powerful Marketing Activities: Lessons From Successful Brands</a
>
</h2>
<div class="flex justify-center items-center space-x-6 text-gray-500">
<div class="flex items-center space-x-3">
<img
class="w-6 h-6 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/thomas-lean.png"
alt="Thomas portrait"
/>
<span class="text-lg font-medium text-gray-900 dark:text-white">
Thomas Lean
</span>
</div>
<span>March 26</span>
<span>178 shares</span>
</div>
</article>
</div>
</div>
</section>
<!-- Block end -->Blog card with image
Use this example to also show a visual image next to the title, description, author, publication date, and category of the blog post.
Blog card with image
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Our Blog
</h2>
<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">
We use an agile approach to test assumptions and connect with the needs
of your audience early and often.
</p>
</div>
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<article
class="p-4 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<a href="#">
<img
class="mb-5 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/blog/office-laptops.png"
alt="office laptop working"
/>
</a>
<span
class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900"
>Article</span
>
<h2
class="my-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Our first office</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After months
of preparation and some hard work, we moved to our new office.
</p>
<div class="flex items-center space-x-4">
<img
class="w-10 h-10 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
alt="Jese Leos avatar"
/>
<div class="font-medium dark:text-white">
<div>Jese Leos</div>
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
Aug 15, 2021 · 16 min read
</div>
</div>
</div>
</article>
<article
class="p-4 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<a href="#">
<img
class="mb-5 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/blog/google-hq.png"
alt="Google HQ"
/>
</a>
<span
class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900"
>Article</span
>
<h2
class="my-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">We partnered up with Google</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After months
of preparation and some hard work, we moved to our new office.
</p>
<div class="flex items-center space-x-4">
<img
class="w-10 h-10 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
alt="Roberta Casas avatar"
/>
<div class="font-medium dark:text-white">
<div>Roberta Casas</div>
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
Aug 15, 2021 · 16 min read
</div>
</div>
</div>
</article>
<article
class="p-4 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
>
<a href="#">
<img
class="mb-5 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/blog/office-laptops-2.png"
alt="office laptops"
/>
</a>
<span
class="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900"
>Article</span
>
<h2
class="my-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Our first project with React</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After months
of preparation and some hard work, we moved to our new office.
</p>
<div class="flex items-center space-x-4">
<img
class="w-10 h-10 rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png"
alt="Sofia McGuire avatar"
/>
<div class="font-medium dark:text-white">
<div>Sofia McGuire</div>
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
Aug 15, 2021 · 16 min read
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Block end -->Featured blog post
Use this website section to highlight one of the featured blog posts alongside the other blog post previews with CTA links.
Featured blog post
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h2
class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Our Blog
</h2>
<p
class="mb-8 lg:mb-16 font-light text-gray-500 dark:text-gray-400 sm:text-xl"
>
We use an agile approach to test assumptions and connect with the needs
of your audience early and often.
</p>
</div>
<div
class="grid gap-8 mb-16 lg:divide-x lg:divide-gray-200 dark:lg:divide-gray-700 lg:grid-cols-3"
>
<article>
<a href="#">
<img
class="mb-5 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/blog/google-hq.png"
alt="blog image"
/>
</a>
<h2
class="my-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">SEO Basics: Beginner's Guide to SEO Success</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After months
of preparation and some hard work, we moved to our new office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
<div class="space-y-8 lg:pl-8">
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">How to quickly deploy a static website</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">What is SEO? Search Engine Optimization Explained</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">Spotify's Car Thing available to all premium users</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
</div>
<div class="space-y-8 lg:pl-8">
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">How to Rank Higher on Google (6 Easy Steps)</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">12 SEO Best Practices That Everyone Should Follow</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
<article>
<h2
class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
>
<a href="#">How to schedule your Tweets to send later</a>
</h2>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400">
Over the past year, Volosoft has undergone many changes! After
months of preparation and some hard work, we moved to our new
office.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Read more
<svg
class="ml-2 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</article>
</div>
</div>
</div>
</section>
<!-- Block end -->