The time is now for it to be okay to be great. People in this world shun people for being great.
<div class="w-full">
<div class="my-12">
<div class="mb-12">
<div class="flex flex-wrap -mx-4 justify-start">
<div class="px-4 relative w-full text-left">
<span class="text-blueGray-800 bg-blueGray-400 text-xs font-bold inline-block py-1 uppercase uppercase last:mr-0 mr-1 leading-tight rounded px-2">Have you seen us?</span>
<h2 class="text-4xl font-bold mt-3 mb-1 text-blueGray-700">Our recent writings</h2>
<p class="mt-2 mb-4 text-xl leading-relaxed text-blueGray-400">The time is now for it to be okay to be great. People in this world shun people for being great.</p>
</div>
</div>
</div>
<div class="items-center flex flex-wrap -mx-4 mb-0">
<div class="px-4 mb-4 relative w-full lg:w-1/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/josh-appel.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">New Challenges</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Touch on a trend</h5>
</div>
</a>
</div>
</div>
<div class="px-4 mb-4 relative w-full lg:w-1/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/john-hoang.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">New Opportunities</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Constantly growing</h5>
</div>
</a>
</div>
</div>
<div class="px-4 mb-4 relative w-full lg:w-2/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/kit-suman.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">Sales Leads</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Configure Blockchain Technology</h5>
</div>
</a>
</div>
</div>
<div class="px-4 mb-4 relative w-full lg:w-2/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/damian.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">AI at the Edge</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Research Byte</h5>
</div>
</a>
</div>
</div>
<div class="px-4 mb-4 relative w-full lg:w-1/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/ashim.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">Spectrum</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">Data Virtualization</h5>
</div>
</a>
</div>
</div>
<div class="px-4 mb-4 relative w-full lg:w-1/4">
<div class="h-330-px overflow-hidden relative flex flex-col min-w-0 break-words bg-white w-full shadow-lg transition-all duration-150 ease-in-out hover:z-1 hover:transform hover:scale-110 group rounded-lg mb-4">
<div class="absolute w-full h-full bg-50-center bg-cover transition-all duration-1000 ease-in-out group-hover:transform group-hover:scale-110 rounded-lg" style="background-image: url('../../assets/img/sections/odin.jpg'); backface-visibility: hidden;"></div>
<div class="absolute w-full h-full bg-black opacity-50 rounded-lg"></div>
<a href="javascript:;">
<div class="absolute text-left p-6 bottom-0">
<h6 class="text-xl leading-normal mb-0 text-white opacity-75">Touch on a trend</h6>
<h5 class="text-2xl font-bold leading-tight mt-0 mb-2 text-white">New Challenges</h5>
</div>
</a>
</div>
</div>
</div>
<div class="text-center"><button class="inline-block outline-none focus:outline-none align-middle transition-all duration-150 ease-in-out uppercase border border-solid font-bold last:mr-0 mr-2 text-white bg-pink-500 border-pink-500 active:bg-pink-600 active:border-pink-600 text-sm px-6 py-2 shadow hover:shadow-lg rounded-md">show more</button></div>
</div>
</div>