Mirrors/tailShape
1
0
Fork 0
mirror of https://github.com/istiyakaminsanto/tailShape.git synced 2025-12-27 22:47:16 +00:00
Code Issues Projects Releases Wiki Activity
Files
9fd68f660c1f3327d55437a736d7462c36888812
tailShape/public/componets/timeline/timeline.html

853 lines
55 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./../../../dist/tailshape.css">
<link rel="stylesheet" href="https://demos.creative-tim.com/notus-js/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
<title>Timeline </title>
</head>
<body>
<button class="dark_mode_button_custom_style" id="dark_mood_toogler">
d
</button>
<!-- timeline 1 start -->
<section class="section_divider">
<div>Timeline 1</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container max-w-5xl px-4 py-12 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div class="text-center sm:text-left mb-14 before:block before:w-24 before:h-3 before:mb-5 before:rounded-md before:mx-auto sm:before:mx-0 before:dark:bg-green-400">
<h3 class="text-3xl font-semibold">Morbi tempor</h3>
<span class="text-sm font-bold tracking-wider uppercase dark:text-gray-400">Vestibulum diam nunc</span>
</div>
</div>
<div class="relative col-span-12 px-4 space-y-6 sm:col-span-9">
<div class="col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-700">
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Donec porta enim vel </h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Dec 2020</time>
<p class="mt-3">Pellentesque feugiat ante at nisl efficitur, in mollis orci scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Aliquam sit amet nunc ut</h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jul 2019</time>
<p class="mt-3">Morbi vulputate aliquam libero non dictum. Aliquam sit amet nunc ut diam aliquet tincidunt nec nec dui. Donec mollis turpis eget egestas sodales.</p>
</div>
<div class="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:dark:bg-green-400">
<h3 class="text-xl font-semibold tracking-wide">Pellentesque habitant morbi</h3>
<time class="text-xs tracking-wide uppercase dark:text-gray-400">Jan 2016</time>
<p class="mt-3">Suspendisse tincidunt, arcu nec faucibus efficitur, justo velit consectetur nisl, sit amet condimentum lacus orci nec purus. Mauris quis quam suscipit, vehicula felis id, vehicula enim.</p>
</div><!---->
</div>
</div>
</div>
</div>
</section>
<!-- timeline 1 end -->
<!-- timeline 2 start -->
<section class="section_divider">
<div>Timeline 2</div>
</section>
<div class="max-w-xl p-8 mx-auto dark:bg-gray-800 dark:text-gray-100">
<ul class="space-y-12">
<li class="flex items-start space-x-3">
<a rel="noopener noreferrer" href="#" class="flex items-center h-8 text-sm hover:underline">v3.2.0</a>
<div class="flex-1 space-y-2">
<div class="flex items-center justify-between space-x-4 dark:text-gray-400">
<a rel="noopener noreferrer" href="#" class="inline-flex items-center px-3 py-1 my-1 space-x-2 text-sm border rounded-full group dark:border-gray-700">
<span aria-hidden="true" class="h-1.5 w-1.5 rounded-full dark:bg-green-400"></span>
<span class="group-hover:underline dark:text-gray-100">Feature</span>
</a>
<span class="text-xs whitespace-nowrap">10h ago</span>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam. Scelerisque amet elit non sit ut tincidunt condimentum. Nisl ultrices eu venenatis diam.</p>
</div>
</div>
</li>
<li class="flex items-start space-x-3">
<a rel="noopener noreferrer" href="#" class="flex items-center h-8 text-sm hover:underline">v3.1.9</a>
<div class="flex-1 space-y-2">
<div class="flex items-center justify-between space-x-4 dark:text-gray-400">
<a rel="noopener noreferrer" href="#" class="inline-flex items-center px-3 py-1 my-1 space-x-2 text-sm border rounded-full group dark:border-gray-700">
<span aria-hidden="true" class="h-1.5 w-1.5 rounded-full dark:bg-green-400"></span>
<span class="group-hover:underline dark:text-gray-100">Bugfix</span>
</a>
<span class="text-xs whitespace-nowrap">2 weeks ago</span>
</div>
<div class="space-y-2">
<p>Scelerisque amet elit non sit ut tincidunt condimentum. Nisi ultrices eu venenatis diam.</p>
<p>Illum quaerat ab inventore, eveniet repudiandae saepe, iste sed molestias laborum atque, quos reprehenderit fugit cumo!</p>
</div>
</div>
</li>
</ul>
</div>
<!-- timeline 2 end -->
<!-- timeline 3 start -->
<section class="section_divider">
<div>Timeline 3</div>
</section>
<ul class="p-4 lg:p-8 dark:bg-gray-800 dark:text-gray-100">
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
<li>
<article>
<a rel="noopener noreferrer" href="#" class="grid p-4 overflow-hidden md:grid-cols-5 rounded-xl lg:p-6 xl:grid-cols-12 hover:dark:bg-gray-900">
<h3 class="mb-1 ml-8 font-semibold md:col-start-2 md:col-span-4 md:ml-0 xl:col-start-3 xl:col-span-9">Earum at ipsa aliquid quis, exercitationem est.</h3>
<time datetime="" class="row-start-1 mb-1 md:col-start-1 xl:col-span-2 dark:text-gray-400">Oct 13, 2020</time>
<p class="ml-8 md:col-start-2 md:col-span-4 xl:col-start-3 xl:col-span-9 md:ml-0 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique saepe exercitationem numquam, labore necessitatibus deleniti quasi. Illo porro nihil necessitatibus debitis delectus aperiam, fuga impedit assumenda odit, velit eveniet est.</p>
</a>
</article>
</li>
</ul>
<!-- timeline 3 end -->
<!-- timeline 4 start -->
<section class="section_divider">
<div>Timeline 4</div>
</section>
<section class="dark:bg-gray-800 dark:text-gray-100">
<div class="container px-4 py-16 mx-auto space-y-8 lg:max-w-3xl">
<h2 class="text-2xl font-bold md:text-4xl">Timeline</h2>
<div class="space-y-8">
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2021</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2020</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
<div>
<h3 class="mb-3 text-lg font-bold md:text-xl">2019</h3>
<ul class="space-y-4">
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li>
<li class="space-y-1">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 fill-current dark:text-green-400">
<path d="M426.072,86.928A238.75,238.75,0,0,0,88.428,424.572,238.75,238.75,0,0,0,426.072,86.928ZM257.25,462.5c-114,0-206.75-92.748-206.75-206.75S143.248,49,257.25,49,464,141.748,464,255.75,371.252,462.5,257.25,462.5Z"></path>
<polygon points="221.27 305.808 147.857 232.396 125.23 255.023 221.27 351.063 388.77 183.564 366.142 160.937 221.27 305.808"></polygon>
</svg>
<h4 class="font-medium">Quis velit quae similique maxime optio temporibus</h4>
</div>
<p class="ml-7 dark:text-gray-400">Illum hic placeat unde porro, cupiditate nesciunt? Numquam debitis eligendi aspernatur mum.</p>
</li><!---->
</ul>
</div>
</div>
</div>
</section>
<!-- timeline 4 end -->
<!-- timeline 5 start -->
<section class="section_divider">
<div>Timeline 5 </div>
</section>
<section class="dark:bg-gray-800">
<div class="w-10/12 md:w-7/12 lg:6/12 mx-auto relative py-20">
<h1 class="text-3xl text-center font-bold text-blue-500">Timeline with Tailwindcss</h1>
<div class="border-l-2 mt-10">
<!-- Card 1 -->
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-blue-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
<!-- Dot Follwing the Left Vertical Line -->
<div class="w-5 h-5 bg-blue-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
<!-- Line that connecting the box with the vertical line -->
<div class="w-10 h-1 bg-blue-300 absolute -left-10 z-0"></div>
<!-- Content that showing in the box -->
<div class="flex-auto">
<h1 class="text-lg">Day 1</h1>
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
<h3>Classroom</h3>
</div>
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
</div>
<!-- Card 2 -->
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-pink-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
<!-- Dot Follwing the Left Vertical Line -->
<div class="w-5 h-5 bg-pink-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
<!-- Line that connecting the box with the vertical line -->
<div class="w-10 h-1 bg-pink-300 absolute -left-10 z-0"></div>
<!-- Content that showing in the box -->
<div class="flex-auto">
<h1 class="text-lg">Day 1</h1>
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
<h3>Classroom</h3>
</div>
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
</div>
<!-- Card 3 -->
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-green-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
<!-- Dot Follwing the Left Vertical Line -->
<div class="w-5 h-5 bg-green-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
<!-- Line that connecting the box with the vertical line -->
<div class="w-10 h-1 bg-green-300 absolute -left-10 z-0"></div>
<!-- Content that showing in the box -->
<div class="flex-auto">
<h1 class="text-lg">Day 1</h1>
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
<h3>Classroom</h3>
</div>
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
</div>
<!-- Card 4 -->
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-purple-600 text-white rounded mb-10 flex-col md:flex-row space-y-4 md:space-y-0">
<!-- Dot Follwing the Left Vertical Line -->
<div class="w-5 h-5 bg-purple-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0"></div>
<!-- Line that connecting the box with the vertical line -->
<div class="w-10 h-1 bg-purple-300 absolute -left-10 z-0"></div>
<!-- Content that showing in the box -->
<div class="flex-auto">
<h1 class="text-lg">Day 1</h1>
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
<h3>Classroom</h3>
</div>
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
</div>
<!-- Card 5 -->
<div class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center px-6 py-4 bg-yellow-600 text-white rounded mb-10 flex-col md:flex-row">
<!-- Dot Follwing the Left Vertical Line -->
<div class="w-5 h-5 bg-yellow-600 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 -mt-2 md:mt-0"></div>
<!-- Line that connecting the box with the vertical line -->
<div class="w-10 h-1 bg-yellow-300 absolute -left-10 z-0"></div>
<!-- Content that showing in the box -->
<div class="flex-auto">
<h1 class="text-lg">Day 1</h1>
<h1 class="text-xl font-bold">Orientation and Briefing on Uniliver basics</h1>
<h3>Classroom</h3>
</div>
<a href="#" class="text-center text-white hover:text-gray-300">Download materials</a>
</div>
</div>
</div>
</section>
<!-- timeline 5 end -->
<!-- timeline 6 start -->
<section class="section_divider">
<div>Timeline 6</div>
</section>
<div class=" bg-blue-500 py-6 flex flex-col justify-center sm:py-12">
<div class="py-3 sm:max-w-xl sm:mx-auto w-full px-2 sm:px-0">
<div class="relative text-gray-700 antialiased text-sm font-semibold">
<!-- Vertical bar running through middle -->
<div class="hidden sm:block w-1 bg-blue-300 absolute h-full left-1/2 transform -translate-x-1/2"></div>
<!-- Left section, set by justify-start and sm:pr-8 -->
<div class="mt-6 sm:mt-0 sm:mb-12">
<div class="flex flex-col sm:flex-row items-center">
<div class="flex justify-start w-full mx-auto items-center">
<div class="w-full sm:w-1/2 sm:pr-8">
<div class="p-4 bg-white rounded shadow">
Now this is a story all about how,
</div>
</div>
</div>
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</div>
</div>
</div>
<!-- Right section, set by justify-end and sm:pl-8 -->
<div class="mt-6 sm:mt-0 sm:mb-12">
<div class="flex flex-col sm:flex-row items-center">
<div class="flex justify-end w-full mx-auto items-center">
<div class="w-full sm:w-1/2 sm:pl-8">
<div class="p-4 bg-white rounded shadow">
My life got flipped turned upside down,
</div>
</div>
</div>
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</div>
</div>
</div>
<!-- Left section, set by justify-start and sm:pr-8 -->
<div class="mt-6 sm:mt-0 sm:mb-12">
<div class="flex flex-col sm:flex-row items-center">
<div class="flex justify-start w-full mx-auto items-center">
<div class="w-full sm:w-1/2 sm:pr-8">
<div class="p-4 bg-white rounded shadow">
And I'd like to take a minute, just sit right there,
</div>
</div>
</div>
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
</div>
<!-- Right section, set by justify-end and sm:pl-8 -->
<div class="mt-6 sm:mt-0">
<div class="flex flex-col sm:flex-row items-center">
<div class="flex justify-end w-full mx-auto items-center">
<div class="w-full sm:w-1/2 sm:pl-8">
<div class="p-4 bg-white rounded shadow">
I'll tell you how I became the Prince of a town called Bel Air.
</div>
</div>
</div>
<div class="rounded-full bg-blue-500 border-white border-4 w-8 h-8 absolute left-1/2 -translate-y-4 sm:translate-y-0 transform -translate-x-1/2 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- timeline 6 end -->
<!-- timeline 7 start -->
<section class="section_divider">
<div>Timeline 7 </div>
</section>
<div class="min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="min-h-screen flex justify-center">
<div class="w-2/3 mx-auto">
<div class="flex flex-row w-full">
<!-- left col -->
<div class="w-2/5 px-2 py-10">
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
<div class="text-gray-600 mb-2 flex justify-between">
<div class="font-bold">
Svjatoslav Torn
</div>
<div class="flex flex-row">
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
</div>
</div>
<div class="text-gray-600">
amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
</div>
</div>
</div>
<!--line column-->
<div class="w-1/5 flex justify-center">
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
<div>20</div>
<div>September</div>
</div>
</div>
</div>
<!--right column-->
<div class="w-2/5 px-2 py-10 ">
</div>
</div>
<div class="flex flex-row w-full">
<!-- left col -->
<div class="w-2/5 px-2 py-10">
</div>
<!--line column-->
<div class="w-1/5 flex justify-center">
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
<div>20</div>
<div>amet</div>
</div>
</div>
</div>
<!--right column-->
<div class="w-2/5 px-2 py-10 ">
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
<div class="text-gray-600 mb-2 flex justify-between">
<div class="font-bold">
Svetlana Torn
</div>
</div>
<div class="text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis enim esse fuga modi quisquam veritatis?
consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
</div>
</div>
</div>
</div>
<div class="flex flex-row w-full">
<!-- left col -->
<div class="w-2/5 px-2 py-10">
<div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5">
<div class="text-gray-600 mb-2 flex justify-between">
<div class="font-bold">
Svjatoslav Torn
</div>
<div class="flex flex-row">
<button class="text-blue-500 mr-2 hover:text-blue-300 transition duration-200"><i class="far fa-edit"></i></button>
<button class="text-red-500 hover:text-red-300 transition duration-200"><i class="far fa-trash-alt"></i></button>
</div>
</div>
<div class="text-gray-600">
consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad corporis culpa deserunt, dignissimos dolor esse fugit ipsam minus odit officiis placeat qui, quidem quis soluta vero? Adipisci alias eius et iure nam nihil reiciendis saepe, voluptatem. Alias cumque dicta dignissimos ea et laborum, minima similique.
</div>
</div>
</div>
<!--line column-->
<div class="w-1/5 flex justify-center">
<div class="relative flex h-full w-1 bg-green-300 items-center justify-center">
<div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-2 border-green-300 leading-none text-center z-10 bg-white font-thin">
<div>20</div>
<div>consectetur</div>
</div>
</div>
</div>
<!--right column-->
<div class="w-2/5 px-2 py-10 ">
</div>
</div>
</div>
</div>
</div>
<!-- timeline 7 end -->
<!-- timeline 8 start -->
<section class="section_divider">
<div>Timeline 8</div>
</section>
<section class="dark:bg-slate-600">
<ol class="ml-20 py-5 relative border-l border-gray-200 dark:border-gray-700">
<li class="mb-10 ml-4">
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">February 2022</time>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Application UI code in Tailwind CSS</h3>
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce &amp; Marketing pages.</p>
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Learn more <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></a>
</li>
<li class="mb-10 ml-4">
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">March 2022</time>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Marketing UI design in Figma</h3>
<p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
</li>
<li class="ml-4">
<div class="absolute w-3 h-3 bg-gray-200 rounded-full -left-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">April 2022</time>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">E-Commerce UI code in Tailwind CSS</h3>
<p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
</li>
</ol>
</section>
<!-- timeline 8 end -->
<!-- timeline 9 start -->
<section class="section_divider">
<div>Timeline 9</div>
</section>
<h3 class="text-2xl text-gray-700 font-bold mb-6 ml-20 mt-10">Latest News</h3>
<ol class="border-l-2 border-purple-600 ml-20 mb-10">
<li>
<div class="md:flex flex-start">
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
</svg>
</div>
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
<div class="flex justify-between mb-4">
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">New Web Design</a>
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">04 / 02 / 2022</a>
</div>
<p class="text-gray-700 mb-6">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 px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
</div>
</div>
</li>
<li>
<div class="md:flex flex-start">
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
</svg>
</div>
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
<div class="flex justify-between mb-4">
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 000 Job Seekers</a>
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">12 / 01 / 2022</a>
</div>
<p class="text-gray-700 mb-6">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 px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
</div>
</div>
</li>
<li>
<div class="md:flex flex-start">
<div class="bg-purple-600 w-6 h-6 flex items-center justify-center rounded-full -ml-3">
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm64-192c0-8.8 7.2-16 16-16h288c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16v-64zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"></path>
</svg>
</div>
<div class="block p-6 rounded-lg shadow-lg bg-gray-100 max-w-md ml-6 mb-10">
<div class="flex justify-between mb-4">
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">Awesome Employers</a>
<a href="#!" class="font-medium text-purple-600 hover:text-purple-700 focus:text-purple-800 duration-300 transition ease-in-out text-sm">21 / 12 / 2021</a>
</div>
<p class="text-gray-700 mb-6">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 px-4 py-1.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out" data-mdb-ripple="true">Preview</button>
<button type="button" class="inline-block px-3.5 py-1 border-2 border-purple-600 text-purple-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out" data-mdb-ripple="true">See demo</button>
</div>
</div>
</li>
</ol>
<!-- timeline 9 end -->
<!-- timeline 10 start -->
<section class="section_divider">
<div>Timeline 10</div>
</section>
<section class="pl-20 py-10 dark:bg-slate-500">
<ol class="relative border-l border-gray-200 dark:border-gray-700">
<li class="mb-10 ml-6">
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</span>
<h3 class="flex items-center mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Application UI v2.0.0 <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-3">Latest</span></h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 13th, 2022</time>
<p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-100">Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce &amp; Marketing pages.</p>
<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"><svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z" clip-rule="evenodd"></path></svg> Download ZIP</a>
</li>
<li class="mb-10 ml-6">
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</span>
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Figma v1.3.0</h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 7th, 2021</time>
<p class="text-base font-normal text-gray-500 dark:text-gray-100">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
</li>
<li class="mb-10 ml-6">
<span class="flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</span>
<h3 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.2</h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2nd, 2021</time>
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
</li>
</ol>
</section>
<!-- timeline 10 end -->
<!-- timeline 11 start -->
<section class="section_divider">
<div>Timeline 11</div>
</section>
<section class="dark:bg-slate-500">
<ol class="items-center sm:flex p-10">
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</div>
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
</div>
<div class="mt-3 sm:pr-8">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.0.0</h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 2, 2021</time>
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
</div>
</li>
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</div>
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
</div>
<div class="mt-3 sm:pr-8">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.2.0</h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on December 23, 2021</time>
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
</div>
</li>
<li class="relative mb-6 sm:mb-0">
<div class="flex items-center">
<div class="flex z-10 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0">
<svg class="w-3 h-3 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
</div>
<div class="hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
</div>
<div class="mt-3 sm:pr-8">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Flowbite Library v1.3.0</h3>
<time class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released on January 5, 2022</time>
<p class="text-base font-normal text-gray-500 dark:text-gray-100">Get started with dozens of web components and interactive elements.</p>
</div>
</li>
</ol>
</section>
<!-- timeline 11 end -->
<!-- timeline 12 start -->
<section class="section_divider">
<div>Timeline 12</div>
</section>
<div class="bg-black text-white py-8">
<div class="container mx-auto flex flex-col items-start md:flex-row my-12 md:my-24">
<div class="flex flex-col w-full sticky md:top-36 lg:w-1/3 mt-2 md:mt-12 px-8">
<p class="ml-2 text-yellow-300 uppercase tracking-loose">Working Process</p>
<p class="text-3xl md:text-4xl leading-normal md:leading-relaxed mb-2">Working Process of Fest</p>
<p class="text-sm md:text-base text-gray-50 mb-4">
Here’s your guide to the tech fest 2021 process. Go through all the steps to know the exact process of the
fest.
</p>
<a href="#"
class="bg-transparent mr-auto hover:bg-yellow-300 text-yellow-300 hover:text-white rounded shadow hover:shadow-lg py-2 px-4 border border-yellow-300 hover:border-transparent">
Explore Now</a>
</div>
<div class="ml-0 md:ml-12 lg:w-2/3 sticky">
<div class="container mx-auto w-full h-full">
<div class="relative wrap overflow-hidden p-10 h-full">
<div class="border-2-2 border-yellow-555 absolute h-full border"
style="right: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
<div class="border-2-2 border-yellow-555 absolute h-full border"
style="left: 50%; border: 2px solid #FFC100; border-radius: 1%;"></div>
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-yellow-300">1-6 May, 2021</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl">Registration</h4>
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
Pick your favourite event(s) and register in that event by filling the form corresponding to that
event. Its that easy :)
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-left">
<p class="mb-3 text-base text-yellow-300">6-9 May, 2021</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl">Participation</h4>
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
Participate online. The links for your registered events will be sent to you via email and whatsapp
groups. Use those links and show your talent.
</p>
</div>
</div>
<div class="mb-8 flex justify-between flex-row-reverse items-center w-full ">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4 text-right">
<p class="mb-3 text-base text-yellow-300"> 10 May, 2021</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl">Result Declaration</h4>
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
The ultimate genius will be revealed by our judging panel on 10th May, 2021 and the resukts will be
announced on the whatsapp groups and will be mailed to you.
</p>
</div>
</div>
<div class="mb-8 flex justify-between items-center w-full right-timeline">
<div class="order-1 w-5/12"></div>
<div class="order-1 w-5/12 px-1 py-4">
<p class="mb-3 text-base text-yellow-300">12 May, 2021</p>
<h4 class="mb-3 font-bold text-lg md:text-2xl text-left">Prize Distribution</h4>
<p class="text-sm md:text-base leading-snug text-gray-50 text-opacity-100">
The winners will be contacted by our team for their addresses and the winning goodies will be sent at
their addresses.
</p>
</div>
</div>
</div>
<img class="mx-auto -mt-36 md:-mt-36" src="https://user-images.githubusercontent.com/54521023/116968861-ef21a000-acd2-11eb-95ac-a34b5b490265.png" />
</div>
</div>
</div>
</div>
<!-- timeline 12 end -->
<!-- start of script section -->
<script type="text/javascript">
let toogler = document.getElementById("dark_mood_toogler");
let doc_html_el = document.getElementsByTagName('html')[0];
doc_html_el.addEventListener('keyup',(e)=>{
// key 220 is the backward slash , need to press ctrl+ \ to activate or deactivate darkmode
if(e.ctrlKey && e.keyCode =='220'){
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
}
})
doc_html_el.addEventListener('keyup',(e)=>{
// key 191 is the forward slash , need to press ctrl+ / to show or hide the darkmode button
if(e.ctrlKey && e.keyCode =='191'){
toogler.style.display =='block'? toogler.style.display = 'none':toogler.style.display ='block';
}
})
toogler.addEventListener('click',()=>{
doc_html_el.className =='' ? doc_html_el.classList.add('dark'):doc_html_el.classList.remove('dark');
console.log(doc_html_el.className);
})
</script>
<!-- end of script section -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink