potentia-website/src/components/cards/TimelineCard.astro
SanjayramVempati f3c6d215d3 improved
2023-04-10 16:59:00 -04:00

25 lines
1.1 KiB
Plaintext

---
var {title = "Title", date="Jan 1 2023"} = Astro.props;
---
<li class="mb-12 ml-12 ">
<span class="absolute flex items-center justify-center w-10 h-10 rounded-full -left-5 ring-8 ring-gray-900 bg-gray-900 text-blue-400 hover:ring-blue-500 hover:bg-blue-500 hover:text-gray-900 duration-300">
<svg aria-hidden="true" class="w-6 h-6 " 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>
<time class="block mb-2 leading-none ">
<button class="text-base font-extrabold mr-2 px-3 py-0.5 rounded-2xl bg-red-500 text-white font-mono shadow-sm ">
{date}
</button>
</time>
<h3 class="flex items-center mb-1 text-2xl font-semibold text-blue-300">{title}<slot name="title" ></slot></h3>
<p class=" w-[40em] max-md:w-full mb-4 text-lg font-normal text-gray-100">
<slot>
</slot>
</p>
</li>