# Partners & Clients Category: showcase Description: Displays a collection of partner and client logos to showcase collaborations and build trust. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <section id="if6xg" layout="container" space="m-x:auto m-y:medium p-x:medium-3x tw-lg:m-y:large tw-lg:p-x:big-3x"> <div layout="flex items:center" space="m-b:medium tw-lg:m-b:large" id="ihxr9"> <div layout="grow" visual="border-w:regular border:blue-200" class="border-t"></div> <div space="p-x:medium" visual="text-size:huge font:tw-bold tw-lg:text-size:giant"> <p id="ibn3j">Partners &amp; Clients</p> </div> <div layout="grow" visual="border-w:regular border:blue-200" class="border-t"></div> </div> <div id="i5xkv" layout="grid grid-cols:2 tw-lg:grid-cols:6" space="g:large tw-lg:g:medium"> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> <div layout="flex items:center justify:center" space="h:big-3x" visual="rounded:small"><img src="https://placehold.co/260x80" layout="object:contain" space="h:big-3x w:[100%]" class="grayscale" /></div> </div> </section> ``` ## Tailwind CSS Code ```html <section id="if6xg" class="container mx-auto my-4 px-6 lg:my-8 lg:px-16"> <div class="mb-4 flex items-center lg:mb-8" id="ihxr9"> <div class="flex-grow border-2 border-t border-blue-200"></div> <div class="px-4 text-2xl font-bold lg:text-4xl"> <p id="ibn3j">Partners &amp; Clients</p> </div> <div class="flex-grow border-2 border-t border-blue-200"></div> </div> <div id="i5xkv" class="grid grid-cols-2 gap-8 lg:grid-cols-6 lg:gap-4"> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> <div class="flex h-16 items-center justify-center rounded"><img src="https://placehold.co/260x80" class="h-16 w-full object-contain grayscale" /></div> </div> </section> ```