← Back
Feature Card (Icon)
Code:
<section class="grid grid-cols-1 lg:grid-cols-3 p-8 bg-neutral-900 rounded-lg gap-2 lg:gap-5">
<div class="feature-card-icon group lg:col-span-1 laser top">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser bottom">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser left">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser right">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group feature-card-icon--large lg:col-span-2 laser ">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group feature-card-icon--large lg:col-span-2 laser bottom">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser left">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser bottom">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser left">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser right">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group lg:col-span-1 laser right">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
<div class="feature-card-icon group feature-card-icon--large lg:col-span-2 laser ">
<button class="feature-card-icon__toggle peer w-full flex flex-nowrap items-center justify-between p-4 lg:p-8 lg:pb-0 relative">
<div class="flex flex-nowrap">
<img src="/assets/images/icons/CalendarCheck.svg" alt="" class="w-8 h-8 lg:w-13 lg:h-13">
<h5 class="text-base font-bold text-white ml-2">Title</h5>
</div>
<svg viewBox="0 0 33 33" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all lg:invisible">
<path d="M28.7861 16.4709C28.7861 16.7362 28.6808 16.9905 28.4932 17.1781C28.3057 17.3656 28.0513 17.4709 27.7861 17.4709H17.7861V27.4709C17.7861 27.7362 17.6808 27.9905 17.4932 28.1781C17.3057 28.3656 17.0513 28.4709 16.7861 28.4709C16.5209 28.4709 16.2666 28.3656 16.079 28.1781C15.8915 27.9905 15.7861 27.7362 15.7861 27.4709V17.4709H5.78613C5.52092 17.4709 5.26656 17.3656 5.07903 17.1781C4.89149 16.9905 4.78613 16.7362 4.78613 16.4709C4.78613 16.2057 4.89149 15.9514 5.07903 15.7638C5.26656 15.5763 5.52092 15.4709 5.78613 15.4709H15.7861V5.47095C15.7861 5.20573 15.8915 4.95138 16.079 4.76384C16.2666 4.5763 16.5209 4.47095 16.7861 4.47095C17.0513 4.47095 17.3057 4.5763 17.4932 4.76384C17.6808 4.95138 17.7861 5.20573 17.7861 5.47095V15.4709H27.7861C28.0513 15.4709 28.3057 15.5763 28.4932 15.7638C28.6808 15.9514 28.7861 16.2057 28.7861 16.4709Z"/>
</svg>
</button>
<a href="#" class="text-sm hidden lg:block p-4 lg:p-8 peer-[.accordion-open]:block">
<p class="text-zinc-300 text-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="flex flex-nowrap items-center text-white mt-4">
<span class="text-semibold mr-3">Find out more</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 19 18" class="w-4 h-4 text-gray-300 group-hover:text-mint-500 group-hover:scale-125 transition-all">
<path d="M18.6007 1V14C18.6007 14.2652 18.4953 14.5196 18.3078 14.7071C18.1202 14.8946 17.8659 15 17.6007 15C17.3354 15 17.0811 14.8946 16.8935 14.7071C16.706 14.5196 16.6007 14.2652 16.6007 14V3.41375L2.30815 17.7075C2.12051 17.8951 1.86602 18.0006 1.60065 18.0006C1.33529 18.0006 1.08079 17.8951 0.893154 17.7075C0.705513 17.5199 0.600098 17.2654 0.600098 17C0.600098 16.7346 0.705513 16.4801 0.893154 16.2925L15.1869 2H4.60065C4.33544 2 4.08108 1.89464 3.89355 1.70711C3.70601 1.51957 3.60065 1.26522 3.60065 1C3.60065 0.734784 3.70601 0.48043 3.89355 0.292893C4.08108 0.105357 4.33544 0 4.60065 0H17.6007C17.8659 0 18.1202 0.105357 18.3078 0.292893C18.4953 0.48043 18.6007 0.734784 18.6007 1Z"/>
</svg>
</p>
</a>
</div>
</section>