Features: General
Quickly get a project started with any of our examples ranging from using parts of the UI to custom components and layouts using Tailwind CSS.
Container Size Image with Icon Blocks
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div class="aspect-w-16 aspect-h-7">
<img class="w-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1624571409412-1f253e1ecc89?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<!-- Grid -->
<div class="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
<div class="lg:col-span-1">
<h2 class="font-bold text-2xl md:text-3xl text-gray-800 dark:text-gray-200">
We tackle the challenges start-ups face
</h2>
<p class="mt-2 md:mt-4 text-gray-500">
Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.
</p>
</div>
<!-- End Col -->
<div class="lg:col-span-2">
<div class="grid sm:grid-cols-2 gap-8 md:gap-12">
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
Creative minds
</h3>
<p class="mt-1 text-gray-600 dark:text-gray-400">
We choose our teams carefully. Our people are the secret to great work.
</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z"/></svg>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
Simple and affordable
</h3>
<p class="mt-1 text-gray-600 dark:text-gray-400">
From boarding passes to movie tickets, there's pretty much nothing you can't store with Preline.
</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
Industry-leading documentation
</h3>
<p class="mt-1 text-gray-600 dark:text-gray-400">
Our documentation and extensive Client libraries contain everything a business needs to build a custom integration.
</p>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-blue-600 dark:text-blue-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<div class="grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
Designing for people
</h3>
<p class="mt-1 text-gray-600 dark:text-gray-400">
We actively pursue the right balance between functionality and aesthetics, creating delightful experiences.
</p>
</div>
</div>
<!-- End Icon Block -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Features -->
Three Center Aligned Images with a Content
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
<div class="lg:col-span-7">
<!-- Grid -->
<div class="grid grid-cols-12 gap-2 sm:gap-6 items-center lg:-translate-x-10">
<div class="col-span-4">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-span-3">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1605629921711-2f6b00c6bbf4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-span-5">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1600194992440-50b26e0a0309?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Col -->
<div class="mt-5 sm:mt-10 lg:mt-0 lg:col-span-5">
<div class="space-y-6 sm:space-y-8">
<!-- Title -->
<div class="space-y-2 md:space-y-4">
<h2 class="font-bold text-3xl lg:text-4xl text-gray-800 dark:text-gray-200">
Collaborative tools to design user experience
</h2>
<p class="text-gray-500">
Use our tools to explore your ideas and make your vision come true. Then share your work easily.
</p>
</div>
<!-- End Title -->
<!-- List -->
<ul role="list" class="space-y-2 sm:space-y-4">
<li class="flex space-x-3">
<!-- Solid Check -->
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<!-- End Solid Check -->
<span class="text-sm sm:text-base text-gray-500">
<span class="font-bold">Less routine</span> – more creativity
</span>
</li>
<li class="flex space-x-3">
<!-- Solid Check -->
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<!-- End Solid Check -->
<span class="text-sm sm:text-base text-gray-500">
Hundreds of thousands saved
</span>
</li>
<li class="flex space-x-3">
<!-- Solid Check -->
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<!-- End Solid Check -->
<span class="text-sm sm:text-base text-gray-500">
Scale budgets <span class="font-bold">efficiently</span>
</span>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Features -->
Simnple with a Single Image
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="md:grid md:grid-cols-2 md:items-center md:gap-12 xl:gap-32">
<div>
<img class="rounded-xl" src="https://images.unsplash.com/photo-1648737963503-1a26da876aca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&h=900&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="mt-5 sm:mt-10 lg:mt-0">
<div class="space-y-6 sm:space-y-8">
<!-- Title -->
<div class="space-y-2 md:space-y-4">
<h2 class="font-bold text-3xl lg:text-4xl text-gray-800 dark:text-gray-200">
We tackle the challenges start-ups face
</h2>
<p class="text-gray-500">
Besides working with start-up enterprises as a partner for digitalization, we have built enterprise products for common pain points that we have encountered in various products and projects.
</p>
</div>
<!-- End Title -->
<!-- List -->
<ul role="list" class="space-y-2 sm:space-y-4">
<li class="flex space-x-3">
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="text-sm sm:text-base text-gray-500">
<span class="font-bold">Easy & fast</span> designing
</span>
</li>
<li class="flex space-x-3">
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="text-sm sm:text-base text-gray-500">
Powerful <span class="font-bold">features</span>
</span>
</li>
<li class="flex space-x-3">
<span class="mt-0.5 h-5 w-5 flex justify-center items-center rounded-full bg-blue-50 text-blue-600 dark:bg-blue-800/30 dark:text-blue-500">
<svg class="flex-shrink-0 h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
</span>
<span class="text-sm sm:text-base text-gray-500">
User Experience Design
</span>
</li>
</ul>
<!-- End List -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Features -->
With 4 Center Aligned Images and Icon Blocks
<!-- Features -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="mx-auto max-w-2xl mb-8 lg:mb-14 text-center">
<h2 class="text-3xl lg:text-4xl text-gray-800 font-bold dark:text-gray-200">
Explore tools
</h2>
<p class="mt-3 text-gray-800 dark:text-gray-200">
The powerful and flexible theme for all kinds of businesses.
</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="mx-auto max-w-3xl grid grid-cols-12 gap-6 lg:gap-8">
<!-- Icon Block -->
<div class="col-span-6 sm:col-span-4 text-center">
<svg class="mx-auto h-auto w-7 md:w-9 text-gray-800 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="10" height="14" x="3" y="8" rx="2"/><path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4"/><path d="M8 18h.01"/></svg>
<div class="mt-2 sm:mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
Responsive
</h3>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="col-span-6 sm:col-span-4 text-center">
<svg class="mx-auto h-auto w-7 md:w-9 text-gray-800 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></svg>
<div class="mt-2 sm:mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
Customizable
</h3>
</div>
</div>
<!-- End Icon Block -->
<!-- Icon Block -->
<div class="col-span-6 col-start-4 sm:col-span-4 text-center">
<svg class="mx-auto h-auto w-7 md:w-9 text-gray-800 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
<div class="mt-2 sm:mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
24/7 Support
</h3>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Grid -->
<!-- Grid -->
<div class="mt-20 grid grid-cols-12 items-center gap-x-2 sm:gap-x-6 lg:gap-x-8">
<div class="hidden md:block col-span-4 md:col-span-3">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-span-4 md:col-span-3">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1587613991119-fbbe8e90531d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1003&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-span-4 md:col-span-3">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1554295405-abb8fd54f153?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=652&q=80" alt="Image Description">
</div>
<!-- End Col -->
<div class="col-span-4 md:col-span-3">
<img class="rounded-xl" src="https://images.unsplash.com/photo-1640622300473-977435c38c04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2072&q=80" alt="Image Description">
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Features -->
Cards on a Background Image
<!-- Features -->
<div class="max-w-6xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div class="min-h-[35vh] bg-[url('https://images.unsplash.com/photo-1665686374006-b8f04cf62d57?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80')] bg-center bg-cover bg-no-repeat relative rounded-xl md:min-h-[75vh]">
<div class="absolute bottom-0 start-0 end-0 max-w-xs text-center mx-auto p-6 md:start-auto md:text-start md:mx-0">
<!-- Card -->
<div class="px-5 py-4 inline-block bg-white rounded-lg md:p-7 dark:bg-gray-800">
<div class="hidden md:block">
<h3 class="text-lg font-bold text-gray-800 sm:text-2xl dark:text-gray-200">How does Preline work?</h3>
<p class="mt-2 text-gray-800 dark:text-gray-200">Learn more about Preline.</p>
</div>
<div class="md:mt-16">
<a class="flex items-center gap-2 text-sm font-medium text-gray-800 hover:text-gray-500 dark:text-white dark:hover:text-gray-400" href="#">
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
Watch our story
</a>
</div>
</div>
<!-- End Card -->
</div>
</div>
</div>
<!-- End Features -->
Download Preline UI
Our code is available for you to download, inspect, and modify: