Загрузка...

Сетка с иконками доверия (Trust Badges Grid) для ecommerce. Адаптивный дизайн на Tailwind CSS. Демонстрирует принципы продукта, ценности или особенности.
<div class="max-w-7xl lg:px-8 mr-auto ml-auto pt-16 pr-6 pb-16 pl-6">
<div class="text-center mb-12">
<p class="text-sm uppercase tracking-widest text-stone-500 font-medium">Trusted principles</p>
</div>
<div class="grid grid-cols-2 lg:grid-cols-6 gap-8 text-center">
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Clean</p>
<p class="text-xs text-stone-600">No harsh chemicals</p>
</div>
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Cruelty-free</p>
<p class="text-xs text-stone-600">Never tested on animals</p>
</div>
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Gentle</p>
<p class="text-xs text-stone-600">For sensitive skin</p>
</div>
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 14.5M14.25 3.104c.251.023.501.05.75.082M19.8 14.5l-2.6 2.6a2.25 2.25 0 01-1.591.659h-6.218a2.25 2.25 0 01-1.591-.659l-2.6-2.6a23.7 23.7 0 016.4-.82c2.13 0 4.24.294 6.4.82z"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Vegan</p>
<p class="text-xs text-stone-600">Plant-based formulas</p>
</div>
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Sustainable</p>
<p class="text-xs text-stone-600">Recyclable packaging</p>
</div>
<div class="space-y-2">
<div class="mx-auto h-12 w-12 rounded-full bg-stone-100 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
class=""></path>
</svg>
</div>
<p class="text-sm font-medium">Effective</p>
<p class="text-xs text-stone-600">Clinically proven</p>
</div>
</div>
</div>