- Elements
- Infobox
Infobox 1
Code
<!-- infobox -->
<div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6">
<div class="text-primary mb-5">
<svg> ... </svg>
</div>
<h5 class="text-lg font-semibold mb-3.5 dark:text-white-light">Layout Package</h5>
<p class="text-white-dark text-[15px] mb-3.5">Lorem ipsum dolor sit amet, labore et dolore magna aliqua.</p>
<a href="javascript:;" class="text-primary font-semibold hover:underline group">Discover
<svg> ... </svg>
</a>
</div>
Infobox 2
Code
<!-- infobox -->
<div class="bg-dark border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 text-center">
<div class="text-white-light bg1-white-dark w-20 h-20 rounded-full flex items-center justify-center mb-5 mx-auto">
<svg> ... </svg>
</div>
<h5 class="text-lg font-semibold mb-3.5 text-white-light">Layout Package</h5>
<p class="text-white-light text-[15px] mb-3.5">Lorem ipsum dolor sit amet, labore et dolore magna aliqua.</p>
<a href="javascript:;" class="text-info font-semibold hover:underline group">Discover
<svg> ... </svg>
</a>
</div>
Infobox 3
Code
<!-- infobox -->
<div class="border border-gray-500/20 rounded-md shadow-[rgb(31_45_61_/_10%)_0px_2px_10px_1px] dark:shadow-[0_2px_11px_0_rgb(6_8_24_/_39%)] p-6 pt-12 mt-8 relative">
<div class="bg-primary absolute text-white-light left-6 -top-8 w-16 h-16 rounded-md flex items-center justify-center mb-5 mx-auto">
<svg> ... </svg>
</div>
<h5 class="text-dark text-lg font-semibold mb-3.5 dark:text-white-light">Layout Package</h5>
<p class="text-white-dark text-[15px] mb-3.5">Lorem ipsum dolor sit amet, labore et dolore magna aliqua.</p>
<a href="javascript:;" class="text-primary font-semibold hover:underline group">Discover
<svg> ... </svg>
</a>
</div>
© . Vristo All rights reserved.