FLEX BOX is a one-dimensional layout system that we can use to create a row or a column axis layout. It makes our life easier to design and build responsive web pages without having to use tricky hacks and a lot of float and position properties in our CSS code.
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div class="flex flex-wrap text-center">
<div class="px-8 py-6 lg:px-24 lg:w-2/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 1</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Learn More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:px-24 lg:w-2/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8 5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 2</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Learn More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 mx-auto lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 md:w-full">
<div class="flex items-center mb-3">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 mr-3 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font">Longer
Information 1
</h2>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Learn More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<div class="flex items-center mb-3">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 mr-3 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font">Longer
Information 2
</h2>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Learn More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<div class="flex items-center mb-3">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 mr-3 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font">Longer
Information 3
</h2>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Learn More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 1</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8 5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 2</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M21 3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18zM11 13H4v6h7v-6zm9 0h-7v6h7v-6zm-9-8H4v6h7V5zm9 0h-7v6h7V5z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 3</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<div
class="inline-flex items-center justify-center flex-shrink-0 w-12 h-12 mb-5 text-blue-800 bg-gray-200 rounded-full">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18"
height="18" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M14 10h-4v4h4v-4zm2 0v4h3v-4h-3zm-2 9v-3h-4v3h4zm2 0h3v-3h-3v3zM14 5h-4v3h4V5zm2 0v3h3V5h-3zm-8 5H5v4h3v-4zm0 9v-3H5v3h3zM8 5H5v3h3V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
</svg>
</div>
<h2 class="mb-3 text-lg font-medium text-gray-700 title-font">Information 4</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 mx-auto py-36 lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded" src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 1
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded" src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 2
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded" src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 2
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 mx-auto py-36 lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<div class="flex items-center justify-between ">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 1
</h2>
<span class="mb-1 text-xs font-medium tracking-widest text-blue-500 title-font">Your
tagline</span>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<div class="flex items-center justify-between ">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 2
</h2>
<span class="mb-1 text-xs font-medium tracking-widest text-blue-500 title-font">Your
tagline</span>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<div class="flex items-center justify-between ">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 3
</h2>
<span class="mb-1 text-xs font-medium tracking-widest text-blue-500 title-font">Your
tagline</span>
</div>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 mx-auto py-36 lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 1
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 2
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/F3F4F7/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 3
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
<div class="px-8 py-6 lg:w-1/4 md:w-full">
<img class="object-cover object-center w-full h-40 mb-6 rounded" src="https://dummyimage.com/720x400/F3F4F7/8693ac"
alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 4
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="text-gray-700 body-font">
<div class="container px-8 pt-24 mx-auto lg:px-4">
<div class="flex flex-wrap text-left">
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<div class="p-6 bg-gray-200 rounded-md">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/ffffff/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 1
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#"
class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
height="20" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path
d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<div class="p-6 bg-gray-200 rounded-md">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/ffffff/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 2
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
<div class="px-8 py-6 lg:w-1/3 md:w-full">
<div class="p-6 bg-gray-200 rounded-md">
<img class="object-cover object-center w-full h-40 mb-6 rounded"
src="https://dummyimage.com/720x400/ffffff/8693ac" alt="content">
<h2 class="mb-3 text-lg font-semibold text-gray-700 lg:text-2xl title-font"> Information 3
</h2>
<p class="mb-4 text-base leading-relaxed">Fingerstache flexitarian street art 8-bit waistcoat.
Distillery
hexagon disrupt edison bulbche.</p>
<a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
Read More
<svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
fill="currentColor">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
