divempty-statebeginner
Empty State
A centered empty state illustration with a message and action button for when no data is available.
Preview
No items yet
Get started by creating your first project. It only takes a few seconds.
<div class="text-center py-16 px-4">
<div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">No items yet</h3>
<p class="text-gray-500 text-sm max-w-xs mx-auto mb-6">Get started by creating your first project. It only takes a few seconds.</p>
<button class="px-6 py-2.5 bg-indigo-600 text-white font-medium text-sm rounded-lg hover:bg-indigo-700 transition-colors">Create Project</button>
</div>Color Breakdown
Icon Background
bg-gray-100
#f3f4f6
Icon
text-gray-400
#9ca3af
Title
text-gray-900
#111827
Description
text-gray-500
#6b7280
Button
bg-indigo-600
#4f46e5
Dark Mode Variant
Add these Tailwind classes for a dark mode adaptation of this recipe.
dark:bg-gray-800 dark:text-gray-600 dark:text-white dark:text-gray-400Use Cases
Empty dashboardsNo search resultsFirst-time user experience
Browser Support
All modern browsers.
Related Recipes
Build Your Own Color Recipe
Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.
Explore ToolsFrequently Asked Questions
Should I use an illustration or icon for empty states?▼
Icons are simpler and faster to load. Illustrations add personality but increase page weight. Choose based on your brand style.