CTA
Off White Grid
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<p className="text-center text-base font-semibold uppercase text-gray-600 tracking-wider">
Trusted by over 5 very average small businesses
</p>
<div className="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img
className="max-h-12"
src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
alt="Workcation"
/>
</div>
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img className="max-h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage" />
</div>
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img className="max-h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple" />
</div>
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img className="max-h-12" src="https://tailwindui.com/img/logos/laravel-logo-gray-400.svg" alt="Laravel" />
</div>
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img
className="max-h-12"
src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
alt="StaticKit"
/>
</div>
<div className="col-span-1 flex justify-center py-8 px-8 bg-gray-50">
<img
className="max-h-12"
src="https://tailwindui.com/img/logos/statamic-logo-gray-400.svg"
alt="Statamic"
/>
</div>
</div>
</div>
</div>
)
}
Simple
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img className="h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple" />
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img className="h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage" />
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img className="h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit" />
</div>
<div className="col-span-1 flex justify-center md:col-span-3 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
alt="Transistor"
/>
</div>
<div className="col-span-2 flex justify-center md:col-span-3 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
alt="Workcation"
/>
</div>
</div>
</div>
</div>
)
}
Simple With Heading
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-blue-200 bg-opacity-25'>
<div className='max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8'>
<div className='lg:grid lg:grid-cols-2 lg:gap-8'>
<h2 className='max-w-md mx-auto text-3xl font-extrabold text-blue-900 text-center lg:max-w-xl lg:text-left'>
The world's most innovative companies use Loesen
</h2>
<div className='flow-root self-center mt-8 lg:mt-0'>
<div className='-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4'>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/workcation-logo-indigo-900.svg'
alt='Workcation'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/tuple-logo-indigo-900.svg'
alt='Tuple'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 justify-center lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/level-logo-indigo-900.svg'
alt='Level'
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
Simple With Heading On Brand
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-blue-700'>
<div className='max-w-7xl mx-auto py-16 px-4 sm:py-20 sm:px-6 lg:px-8'>
<h2 className='text-3xl font-extrabold text-white'>
The world's most innovative companies use Loesen
</h2>
<div className='flow-root mt-8 lg:mt-10'>
<div className='-mt-4 -ml-8 flex flex-wrap justify-between lg:-ml-4'>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/tuple-logo-indigo-300.svg'
alt='Tuple'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/mirage-logo-indigo-300.svg'
alt='Mirage'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/statickit-logo-indigo-300.svg'
alt='StaticKit'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/transistor-logo-indigo-300.svg'
alt='Transistor'
/>
</div>
<div className='mt-4 ml-8 flex flex-grow flex-shrink-0 lg:flex-grow-0 lg:ml-4'>
<img
className='h-12'
src='https://tailwindui.com/img/logos/workcation-logo-indigo-300.svg'
alt='Workcation'
/>
</div>
</div>
</div>
</div>
</div>
);
}
Split With Grid On Right
/* This example requires Tailwind CSS v2.0+ */
export default function Example() {
return (
<div className='bg-white'>
<div className='max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8'>
<div className='lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center'>
<div>
<h2 className='text-3xl font-extrabold text-gray-900 sm:text-4xl'>
Used by the world's most average companies
</h2>
<p className='mt-3 max-w-3xl text-lg text-gray-500'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus
etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue.
</p>
<div className='mt-8 sm:flex'>
<div className='rounded-md shadow'>
<a
href='#'
className='flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700'
>
Create Account
</a>
</div>
<div className='mt-3 sm:mt-0 sm:ml-3'>
<a
href='#'
className='flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200'
>
Contact Us
</a>
</div>
</div>
</div>
<div className='mt-8 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2'>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/transistor-logo-gray-400.svg'
alt='Workcation'
/>
</div>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/mirage-logo-gray-400.svg'
alt='Mirage'
/>
</div>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/tuple-logo-gray-400.svg'
alt='Tuple'
/>
</div>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/laravel-logo-gray-400.svg'
alt='Laravel'
/>
</div>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/statickit-logo-gray-400.svg'
alt='StaticKit'
/>
</div>
<div className='col-span-1 flex justify-center py-8 px-8 bg-gray-50'>
<img
className='max-h-12'
src='https://tailwindui.com/img/logos/statamic-logo-gray-400.svg'
alt='Statamic'
/>
</div>
</div>
</div>
</div>
</div>
);
}