v5.0 launch sale - limited time offer!
Come back tomorrow for a new one!
Your free Tailwind CSS component of the day is here.
Every day we're giving away a free premium Tailwind CSS component from the Tailkit library. Perfect for learning, prototyping, or adding that special touch to your project. Grab one of the available Starter Kits and give them a go. Want more? Get access now!
Next Tailwind component unlocks in:
00
Hours
00
Minutes
00
Seconds
Application UIComponentsTimelineSimple
<!-- Timeline: Simple -->
<div class="relative py-5 dark:text-gray-100">
<!-- Vertical Guide -->
<div
class="absolute top-0 bottom-0 left-0 flex w-10 flex-col justify-center md:w-12"
aria-hidden="true"
>
<div
class="mx-auto h-2.5 w-1 grow-0 rounded-t bg-linear-to-b from-transparent to-blue-100 dark:to-blue-900"
></div>
<div class="mx-auto w-1 grow bg-blue-100 dark:bg-blue-900"></div>
<div
class="mx-auto h-2.5 w-1 grow-0 rounded-b bg-linear-to-t from-transparent to-blue-100 dark:to-blue-900"
></div>
</div>
<!-- END Vertical Guide -->
<!-- Timeline -->
<ul class="relative space-y-4 pl-10 md:pl-12">
<!-- Event -->
<li class="relative">
<div
class="absolute top-0 bottom-0 left-0 mt-5 flex w-10 -translate-x-full justify-center md:w-12"
>
<div
class="size-3 rounded-full bg-blue-500 ring-3 ring-blue-100 ring-offset-2 dark:bg-blue-300 dark:ring-blue-900 dark:ring-offset-gray-900"
></div>
</div>
<div
class="rounded-xl bg-gray-100 p-4 hover:ring-3 hover:ring-gray-100 hover:ring-offset-2 dark:bg-gray-800 dark:ring-offset-gray-900 dark:hover:ring-gray-700"
>
<h4 class="mb-2 font-semibold">3.0 update is now live!</h4>
<p class="text-sm leading-relaxed">
It's finally here are comes packed with many awesome features. Be sure
to
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>download it</a
>
and let us know
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>what you think</a
>!
</p>
</div>
</li>
<!-- END Event -->
<!-- Event -->
<li class="relative">
<div
class="absolute top-0 bottom-0 left-0 mt-5 flex w-10 -translate-x-full justify-center md:w-12"
>
<div
class="size-3 rounded-full bg-blue-500 ring-3 ring-blue-100 ring-offset-2 dark:bg-blue-300 dark:ring-blue-900 dark:ring-offset-gray-900"
></div>
</div>
<div
class="rounded-xl bg-gray-100 p-4 hover:ring-3 hover:ring-gray-100 hover:ring-offset-2 dark:bg-gray-800 dark:ring-offset-gray-900 dark:hover:ring-gray-700"
>
<h4 class="mb-2 font-semibold">Maintenance notice</h4>
<p class="text-sm leading-relaxed">
We are going to apply some security fixes next week. Please check out
the
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>schedule</a
>
for more information about any downtime.
</p>
</div>
</li>
<!-- END Event -->
<!-- Event -->
<li class="relative">
<div
class="absolute top-0 bottom-0 left-0 mt-5 flex w-10 -translate-x-full justify-center md:w-12"
>
<div
class="size-3 rounded-full bg-blue-500 ring-3 ring-blue-100 ring-offset-2 dark:bg-blue-300 dark:ring-blue-900 dark:ring-offset-gray-900"
></div>
</div>
<div
class="rounded-xl bg-gray-100 p-4 hover:ring-3 hover:ring-gray-100 hover:ring-offset-2 dark:bg-gray-800 dark:ring-offset-gray-900 dark:hover:ring-gray-700"
>
<h4 class="mb-2 font-semibold">We reached 3,500 paying users</h4>
<p class="text-sm leading-relaxed">
Thank you all so much for your support!
</p>
</div>
</li>
<!-- END Event -->
<!-- Event -->
<li class="relative">
<div
class="absolute top-0 bottom-0 left-0 mt-5 flex w-10 -translate-x-full justify-center md:w-12"
>
<div
class="size-3 rounded-full bg-blue-500 ring-3 ring-blue-100 ring-offset-2 dark:bg-blue-300 dark:ring-blue-900 dark:ring-offset-gray-900"
></div>
</div>
<div
class="rounded-xl bg-gray-100 p-4 hover:ring-3 hover:ring-gray-100 hover:ring-offset-2 dark:bg-gray-800 dark:ring-offset-gray-900 dark:hover:ring-gray-700"
>
<h4 class="mb-2 font-semibold">Beta registrations are now open</h4>
<p class="text-sm leading-relaxed">
We are going to be beta testing our 3.0 release. Be sure to
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>register</a
>
for a chance to participate and check out all the new features before
everyone else.
</p>
</div>
</li>
<!-- END Event -->
</ul>
<!-- END Timeline -->
</div>
<!-- END Timeline: Simple -->
Did you like it?
2,000+ handcrafted snippets.
Now in your AI editor.
Build modern web apps and websites with Tailkit's huge collection of Tailwind components, templates and tools. Now available through our MCP Server.