Hero Component

<section class="max-screen-xl mx-auto min-h-screen"> <div class="grid place-items-center mx-12 gap-x-2 gap-y-6 sm:grid-cols-1 md:gap-x-6 lg:grid-cols-3 xl:grid-cols-3 relative" > <div class="flex flex-col gap-12"> <div class="absolute bottom-0 left- w-[650px] h-[650px] bg-transparent z-[-1] blur-lg" > <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg" > <path id="blob" fill="#19FFBD"> <animate attributeName="d" dur="9700ms" repeatCount="indefinite" values="M433,353Q369,456,262,435Q155,414,100.5,332Q46,250,88,146Q130,42,233,71Q336,100,416.5,175Q497,250,433,353Z; M410,351Q367,452,259.5,435.5Q152,419,123.5,334.5Q95,250,111.5,144Q128,38,233,68Q338,98,395.5,174Q453,250,410,351Z; M418,356.5Q373,463,272.5,423.5Q172,384,102.5,317Q33,250,90.5,161Q148,72,238,93.5Q328,115,395.5,182.5Q463,250,418,356.5Z; M405.83955,332.68579Q345.63899,415.37158,240.07214,432.62034Q134.50528,449.8691,73.11225,349.93455Q11.71921,250,87.45989,174.6805Q163.20056,99.36101,268.90781,66.64568Q374.61505,33.93034,420.32758,141.96517Q466.04011,250,405.83955,332.68579Z; M433,353Q369,456,262,435Q155,414,100.5,332Q46,250,88,146Q130,42,233,71Q336,100,416.5,175Q497,250,433,353Z" ></animate> </path> </svg> </div> <div class="absolute top-0 right-0 w-[400px] h-[400px] bg-transparent z-[-1] blur-lg" > <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg" > <path id="blob" fill=" #19FFBD"> <animate attributeName="d" dur="9400ms" repeatCount="indefinite" values="M421,330.5Q343,411,252.5,407Q162,403,118.5,326.5Q75,250,111,161Q147,72,250.5,70.5Q354,69,426.5,159.5Q499,250,421,330.5Z; M410,351Q367,452,259.5,435.5Q152,419,123.5,334.5Q95,250,111.5,144Q128,38,233,68Q338,98,395.5,174Q453,250,410,351Z; M379.5,337Q351,424,255,415.5Q159,407,97.5,328.5Q36,250,93,163.5Q150,77,246,83.5Q342,90,375,170Q408,250,379.5,337Z; M405.83955,332.68579Q345.63899,415.37158,240.07214,432.62034Q134.50528,449.8691,73.11225,349.93455Q11.71921,250,87.45989,174.6805Q163.20056,99.36101,268.90781,66.64568Q374.61505,33.93034,420.32758,141.96517Q466.04011,250,405.83955,332.68579Z; M421,330.5Q343,411,252.5,407Q162,403,118.5,326.5Q75,250,111,161Q147,72,250.5,70.5Q354,69,426.5,159.5Q499,250,421,330.5Z" ></animate> </path> </svg> </div> <div class="grid justify-items-end gap-4 text-end border-2 rounded-2xl border-gray-100 shadow-lg p-4 bg-white bg-opacity-50" > <div class="w-16 h-16 flex justify-center items-center bg-[#19FFBD] rounded-2xl text-xl" > 1 </div> <h5 class="text-xl font-sans font-bold text-gray-700"> Lorem ipsum </h5> <p class="font-serif font-normal text-gray-500"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum velit magna, eget feugiat augue suscipit sed. </p> </div> <div class="grid justify-items-end gap-4 text-end border-2 rounded-2xl border-gray-100 shadow-lg p-4 bg-white bg-opacity-50" > <div class="w-16 h-16 flex justify-center items-center bg-[#19FFBD] rounded-2xl text-xl" > 2 </div> <h5 class="text-xl font-sans font-bold text-gray-700"> Lorem ipsum </h5> <p class="font-serif font-normal text-gray-500"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum velit magna, eget feugiat augue suscipit sed. </p> </div> </div> <div> <img src="https://i.imgur.com/cT0lRDY.png" alt="Iphone mockup" /> </div> <div class="flex flex-col gap-12"> <div class="grid justify-items-start gap-4 text-start border-2 rounded-2xl border-gray-100 shadow-2xl p-4 bg-white bg-opacity-50" > <div class="w-16 h-16 flex justify-center items-center bg-[#19FFBD] rounded-2xl text-xl" > 3 </div> <h5 class="text-xl font-sans font-bold text-gray-700"> Lorem ipsum </h5> <p class="font-serif font-normal text-gray-500"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum velit magna, eget feugiat augue suscipit sed. </p> </div> <div class="grid justify-items-start gap-4 text-start border-2 rounded-2xl border-gray-100 shadow-lg p-4 bg-white bg-opacity-50" > <div class="w-16 h-16 flex justify-center items-center bg-[#19FFBD] rounded-2xl text-xl" > 4 </div> <h5 class="text-xl font-sans font-bold text-gray-700"> Lorem ipsum </h5> <p class="font-serif font-normal text-gray-500"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum velit magna, eget feugiat augue suscipit sed. </p> </div> </div> </div> </section>