v>

Grids.

3 Blocks

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 ">
                    <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>
                                            

wickedtemplates

Spring Offer! 30% discount on all products. Use the Code wicked30

Tired of designing?

Don't lose precious days designing the landing page and testing a site. Instead, integrate one with your favourite framework.


                <section class="text-gray-700 ">
                    <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 ">
                    <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 ">
                    <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 ">
                    <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 ">
                    <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 ">
                    <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>