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.
import React from 'react';
export default function App() {
return (
<ol className="border-l border-neutral-300 dark:border-neutral-500">
{/* <!--First item--> */}
<li>
<div className="flex-start flex items-center pt-3">
<div className="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p className="text-sm text-neutral-500 dark:text-neutral-300">
01.07.2021
</p>
</div>
<div className="mb-6 ml-4 mt-2">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 1
</h4>
<p className="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 className="flex-start flex items-center pt-2">
<div className="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p className="text-sm text-neutral-500 dark:text-neutral-300">
13.09.2021
</p>
</div>
<div className="mb-6 ml-4 mt-2">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 2
</h4>
<p className="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 className="flex-start flex items-center pt-2">
<div className="-ml-[5px] mr-3 h-[9px] w-[9px] rounded-full bg-neutral-300 dark:bg-neutral-500"></div>
<p className="text-sm text-neutral-500 dark:text-neutral-300">
25.11.2021
</p>
</div>
<div className="ml-4 mt-2 pb-5">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 3
</h4>
<p className="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>
);
}
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.
import React from 'react';
export default function App() {
return (
<ol className="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 className="flex-start flex items-center pt-2 md:block md:pt-0">
<div className="-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 className="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
01.07.2021
</p>
</div>
<div className="ml-4 mt-2 pb-5 md:ml-0">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 1
</h4>
<p className="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 className="flex-start flex items-center pt-2 md:block md:pt-0">
<div className="-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 className="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
13.09.2021
</p>
</div>
<div className="ml-4 mt-2 pb-5 md:ml-0">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 2
</h4>
<p className="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 className="flex-start flex items-center pt-2 md:block md:pt-0">
<div className="-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 className="mt-2 text-sm text-neutral-500 dark:text-neutral-300">
25.11.2021
</p>
</div>
<div className="ml-4 mt-2 pb-5 md:ml-0">
<h4 className="mb-1.5 text-xl font-semibold">
Title of section 3
</h4>
<p className="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.
Loading...
import React from "react";
import { TERipple } from "tw-elements-react";
export default function TimelinePrimaryColor(): JSX.Element {
return (
<ol className="border-l-2 border-primary dark:border-primary-500">
{/* <!--First item--> */}
<li>
<div className="flex-start flex items-center">
<div className="-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 className="-mt-2 text-xl font-semibold">Title of section 1</h4>
</div>
<div className="mb-6 ml-6 pb-6">
<a
href="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="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)]"
>
Read more
</button>
</TERipple>
</div>
</li>
{/* <!--Second item--> */}
<li>
<div className="flex-start flex items-center">
<div className="-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 className="-mt-2 text-xl font-semibold">Title of section 2</h4>
</div>
<div className="mb-6 ml-6 pb-6">
<a
href="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="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)]"
>
Read more
</button>
</TERipple>
</div>
</li>
{/* <!--Third item--> */}
<li>
<div className="flex-start flex items-center">
<div className="-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 className="-mt-2 text-xl font-semibold">Title of section 3</h4>
</div>
<div className="mb-6 ml-6 pb-6">
<a
href="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="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)]"
>
Read more
</button>
</TERipple>
</div>
</li>
</ol>
);
}
Icons
Use this vertical timeline component with icons and badges to show a more advanced set of data.
Loading...
import React from "react";
import { TERipple } from "tw-elements-react";
export default function TimelineIcons(): JSX.Element {
return (
<>
<h3 className="mb-6 ml-3 text-2xl font-bold">Latest News</h3>
<ol className="border-l-2 border-info-100">
{/* <!--First item--> */}
<li>
<div className="flex-start md:flex">
<div className="-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"
className="h-4 w-4"
>
<path
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
<div className="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 className="mb-4 flex justify-between">
<a
href="#!"
className="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="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-info mr-1 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)]"
>
Preview
</button>
</TERipple>
<TERipple>
<button
type="button"
className="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>
</TERipple>
</div>
</div>
</li>
{/* <!--Second item--> */}
<li>
<div className="flex-start md:flex">
<div className="-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"
className="h-4 w-4"
>
<path
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
<div className="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 className="mb-4 flex justify-between">
<a
href="#!"
className="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="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-info mr-1 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)]"
>
Preview
</button>
</TERipple>
<TERipple>
<button
type="button"
className="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"
>
See demo
</button>
</TERipple>
</div>
</div>
</li>
{/* <!--Third item--> */}
<li>
<div className="flex-start md:flex">
<div className="-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"
className="h-4 w-4"
>
<path
fillRule="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"
clipRule="evenodd"
/>
</svg>
</div>
<div className="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 className="mb-4 flex justify-between">
<a
href="#!"
className="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="#!"
className="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 className="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>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-info mr-1 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)]"
>
Preview
</button>
</TERipple>
<TERipple>
<button
type="button"
className="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"
>
See demo
</button>
</TERipple>
</div>
</div>
</li>
</ol>
</>
);
}