Basic example
Use this responsive timeline component to show a series of data entries with a date, title, and description with a vertical line with dots on the left or right side of the wrapper element.
01.07.2021
Title of section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
13.09.2021
Title of section 2
Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.
25.11.2021
Title of section 3
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
<ol class="border-l border-neutral-300 dark:border-neutral-500">
<!--First item-->
<li>
<div class="flex-start flex items-center pt-3">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p class="text-sm text-neutral-500 dark:text-neutral-300">
01.07.2021
</p>
</div>
<div class="mb-6 ml-4 mt-2">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 1</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula.
</p>
</div>
</li>
<!--Second item-->
<li>
<div class="flex-start flex items-center pt-2">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p class="text-sm text-neutral-500 dark:text-neutral-300">
13.09.2021
</p>
</div>
<div class="mb-6 ml-4 mt-2">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 2</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Libero expedita explicabo eius fugiat quia aspernatur autem
laudantium error architecto recusandae natus sapiente sit nam
eaque, consectetur porro molestiae ipsam an deleniti.
</p>
</div>
</li>
<!--Third item-->
<li>
<div class="flex-start flex items-center pt-2">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p class="text-sm text-neutral-500 dark:text-neutral-300">
25.11.2021
</p>
</div>
<div class="ml-4 mt-2 pb-5">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 3</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit
natus! Eum corporis illum nihil officiis tempore. Excepturi illo
natus libero sit doloremque, laborum molestias rerum pariatur quam
ipsam necessitatibus incidunt, explicabo.
</p>
</div>
</li>
</ol>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Horizontal example
Use this horizontally aligned timeline component to show a series of data in a chronological order.
01.07.2021
Title of section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
13.09.2021
Title of section 2
Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.
25.11.2021
Title of section 3
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
<ol
class="border-l border-neutral-300 dark:border-neutral-500 md:flex md:justify-center md:gap-6 md:border-l-0 md:border-t">
<!--First item-->
<li>
<div class="flex-start flex items-center pt-2 md:block md:pt-0">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:ml-0 md:mr-0"></div>
<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
01.07.2021
</p>
</div>
<div class="ml-4 mt-2 pb-5 md:ml-0">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 1</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula.
</p>
</div>
</li>
<!--Second item-->
<li>
<div class="flex-start flex items-center pt-2 md:block md:pt-0">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:ml-0 md:mr-0"></div>
<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
13.09.2021
</p>
</div>
<div class="ml-4 mt-2 pb-5 md:ml-0">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 2</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Libero expedita explicabo eius fugiat quia aspernatur autem
laudantium error architecto recusandae natus sapiente sit nam
eaque, consectetur porro molestiae ipsam an deleniti.
</p>
</div>
</li>
<!--Third item-->
<li>
<div class="flex-start flex items-center pt-2 md:block md:pt-0">
<div
class="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500 md:-mt-[5px] md:ml-0 md:mr-0"></div>
<p class="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
25.11.2021
</p>
</div>
<div class="ml-4 mt-2 pb-5 md:ml-0">
<h4 class="mb-1.5 text-xl font-semibold">Title of section 3</h4>
<p class="mb-3 text-neutral-500 dark:text-neutral-300">
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit
natus! Eum corporis illum nihil officiis tempore. Excepturi illo
natus libero sit doloremque, laborum molestias rerum pariatur quam
ipsam necessitatibus incidunt, explicabo.
</p>
</div>
</li>
</ol>
Primary color
Use primary color to give your timeline a custom look.
Title of section 1
4 February, 2022Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Title of section 2
12 January, 2022Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Title of section 3
27 December, 2021At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
<ol class="border-l-2 border-primary dark:border-primary-500">
<!--First item-->
<li>
<div class="flex-start flex items-center">
<div
class="-ml-[9px] -mt-2 mr-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
<h4 class="-mt-2 text-xl font-semibold">Title of section 1</h4>
</div>
<div class="mb-6 ml-6 pb-6">
<a
href="#!"
class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>4 February, 2022</a
>
<p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Read more
</button>
</div>
</li>
<!--Second item-->
<li>
<div class="flex-start flex items-center">
<div
class="-ml-[9px] -mt-2 mr-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
<h4 class="-mt-2 text-xl font-semibold">Title of section 2</h4>
</div>
<div class="mb-6 ml-6 pb-6">
<a
href="#!"
class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>12 January, 2022</a
>
<p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-200">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Read more
</button>
</div>
</li>
<!--Third item-->
<li>
<div class="flex-start flex items-center">
<div
class="-ml-[9px] -mt-2 mr-3 flex h-4 w-4 items-center justify-center rounded-full bg-primary dark:bg-primary-500"></div>
<h4 class="-mt-2 text-xl font-semibold">Title of section 3</h4>
</div>
<div class="mb-6 ml-6 pb-6">
<a
href="#!"
class="text-sm text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>27 December, 2021</a
>
<p class="mb-4 mt-2 text-neutral-600 dark:text-neutral-200">
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. Et harum quidem rerum
facilis est et expedita distinctio.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Read more
</button>
</div>
</li>
</ol>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Icons
Use this vertical timeline component with icons and badges to show a more advanced set of data.
Latest News
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
Libero expedita explicabo eius fugiat quia aspernatur autem laudantium error architecto recusandae natus sapiente sit nam eaque, consectetur porro molestiae ipsam an deleniti.
Voluptatibus temporibus esse illum eum aspernatur, fugiat suscipit natus! Eum corporis illum nihil officiis tempore. Excepturi illo natus libero sit doloremque, laborum molestias rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
<h3
class="mb-6 ml-3 text-2xl font-bold text-neutral-700 dark:text-neutral-300">
Latest News
</h3>
<ol class="border-l-2 border-info-100">
<!--First item-->
<li>
<div class="flex-start md:flex">
<div
class="-ml-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-4 w-4">
<path
fill-rule="evenodd"
d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
clip-rule="evenodd" />
</svg>
</div>
<div
class="mb-10 ml-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
<div class="mb-4 flex justify-between">
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>New Web Design</a
>
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>04 / 02 / 2022</a
>
</div>
<p class="mb-6 text-neutral-700 dark:text-neutral-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
scelerisque diam non nisi semper, et elementum lorem ornare.
Maecenas placerat facilisis mollis. Duis sagittis ligula in
sodales vehicula.
</p>
<button
type="button"
class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Preview
</button>
<button
type="button"
class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
data-te-ripple-init>
See demo
</button>
</div>
</div>
</li>
<!--Second item-->
<li>
<div class="flex-start md:flex">
<div
class="-ml-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-4 w-4">
<path
fill-rule="evenodd"
d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
clip-rule="evenodd" />
</svg>
</div>
<div
class="mb-10 ml-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
<div class="mb-4 flex justify-between">
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>21 000 Job Seekers</a
>
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>12 / 01 / 2022</a
>
</div>
<p class="mb-6 text-neutral-700 dark:text-neutral-200">
Libero expedita explicabo eius fugiat quia aspernatur autem
laudantium error architecto recusandae natus sapiente sit nam
eaque, consectetur porro molestiae ipsam an deleniti.
</p>
<button
type="button"
class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Preview
</button>
<button
type="button"
class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
data-te-ripple-init>
See demo
</button>
</div>
</div>
</li>
<!--Third item-->
<li>
<div class="flex-start md:flex">
<div
class="-ml-[13px] flex h-[25px] w-[25px] items-center justify-center rounded-full bg-info-100 text-info-700">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-4 w-4">
<path
fill-rule="evenodd"
d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
clip-rule="evenodd" />
</svg>
</div>
<div
class="mb-10 ml-6 block max-w-md rounded-lg bg-neutral-50 p-6 shadow-md shadow-black/5 dark:bg-neutral-700 dark:shadow-black/10">
<div class="mb-4 flex justify-between">
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>Awesome Employers</a
>
<a
href="#!"
class="text-sm text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>21 / 12 / 2021</a
>
</div>
<p class="mb-6 text-neutral-700 dark:text-neutral-200">
Voluptatibus temporibus esse illum eum aspernatur, fugiat
suscipit natus! Eum corporis illum nihil officiis tempore.
Excepturi illo natus libero sit doloremque, laborum molestias
rerum pariatur quam ipsam necessitatibus incidunt, explicabo.
</p>
<button
type="button"
class="inline-block rounded bg-info px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#54b4d3] transition duration-150 ease-in-out hover:bg-info-600 hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:bg-info-600 focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] focus:outline-none focus:ring-0 active:bg-info-700 active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.3),0_4px_18px_0_rgba(84,180,211,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(84,180,211,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(84,180,211,0.2),0_4px_18px_0_rgba(84,180,211,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Preview
</button>
<button
type="button"
class="inline-block rounded border-2 border-info px-4 pb-[3px] pt-[4px] text-xs font-medium uppercase leading-normal text-info transition duration-150 ease-in-out hover:border-info-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-info-600 focus:border-info-600 focus:text-info-600 focus:outline-none focus:ring-0 active:border-info-700 active:text-info-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
data-te-ripple-init>
See demo
</button>
</div>
</div>
</li>
</ol>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Related resources
Tutorials:
Extended Docs:
colors
dividers
headings
icons
typography
scrollspy
buttons
cards
link
list group
paragraphs
progress
stepper
datepicker
range
timepicker
ripple
box sizing
breakpoints
dark theme
display flex
position
spacing
text bold
text color
text size
Design System (Figma):
introduction
content should be the star
less is more
power of visual hierarchy
de emphasize with no mercy
size matters
label overload
lowering contrast
beyond borders
let it breathe
user experience
do not start with the roof
project personality
design system
plan the process
principles
tips and tricks