Recent Activity - Tailwind Component
This is the component for timeline or activity feed. Wanted to keep it simple, it is use Tailwind CSS to create this beautiful card tailwind component.
card
Loading component...
87 lines
<div
class="w-10/12 xl:w-2/5 md:w-3/5 sm:w-9/12 mx-auto relative shadow-xl pl-8 pr-4 sm:pl-8 lg:pr-8 py-4 my-8 rounded-lg bg-white dark:bg-gray-800">
<div class="flex flex-wrap items-center justify-between">
<h1 class="text-xl sm:text-3xl font-bold text-gray-800 dark:text-gray-50">Recent Activity</h1>
<span>
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 sm:h-6 sm:w-6 sm:-ml-8 text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-800 dark:hover:text-gray-200"
viewBox="0 0 20 20" fill="currentColor">
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
</svg>
</span>
</div>
<div class="border-l-2 mt-10">
<div
class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center pl-12 pr-2 sm:pl-0 sm:pr-0 sm:px-3 py-2 text-white rounded mb-5 flex-col md:flex-row space-y-5 md:space-y-0">
<div
class="w-8 h-8 bg-blue-200 dark:bg-gray-100 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto mt-1.5 text-purple-600 dark:text-gray-700"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-auto -ml-12 sm:-ml-16 md:-ml-0">
<h3 class="text-lg font-bold -mt-5 md:-mt-0 text-gray-700 dark:text-gray-200">Added New Interest <span
class="font-medium text-purple-600 dark:text-gray-100">"Volunteer Activities"</span></h3>
<small class="text-gray-500 dark:text-gray-300">Today . 3.12 PM</small>
</div>
</div>
<div
class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center pl-12 pr-2 sm:pl-0 sm:pr-0 px-3 py-2 text-white mb-5 flex-col md:flex-row space-y-5 md:space-y-0">
<div
class="w-8 h-8 bg-blue-200 dark:bg-gray-100 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto mt-1.5 text-purple-600 dark:text-gray-700"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</div>
<div class="flex-auto -ml-12 sm:-ml-16 md:-ml-0">
<h3 class="text-lg font-bold -mt-5 md:-mt-0 text-gray-700 dark:text-gray-200">Responded to need <span
class="font-medium text-purple-600 dark:text-gray-100">"In-Kind Opportunity"</span></h3>
<small class="text-gray-500 dark:text-gray-300">Today . 3.24 PM</small>
</div>
</div>
<div
class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center pl-12 pr-2 sm:pl-0 sm:pr-0 px-3 py-2 text-white rounded mb-5 flex-col md:flex-row space-y-5 md:space-y-0">
<div
class="w-8 h-8 bg-blue-200 dark:bg-gray-100 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto mt-1.5 text-purple-600 dark:text-gray-700"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-auto -ml-12 sm:-ml-16 md:-ml-0">
<h3 class="text-lg font-bold -mt-5 md:-mt-0 text-gray-700 dark:text-gray-200">Attending the event <span
class="font-medium text-purple-600 dark:text-gray-100">"Extraordinary Event"</span></h3>
<small class="text-gray-500 dark:text-gray-300">Yesterday . 10.25 PM</small>
</div>
</div>
<div
class="transform transition cursor-pointer hover:-translate-y-2 ml-10 relative flex items-center pl-12 pr-2 sm:pl-0 sm:pr-0 px-3 py-2 text-white rounded mb-5 flex-col md:flex-row space-y-5 md:space-y-0">
<div
class="w-8 h-8 bg-blue-200 dark:bg-gray-100 absolute -left-10 transform -translate-x-2/4 rounded-full z-10 mt-2 md:mt-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto mt-1.5 text-purple-600 dark:text-gray-700"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</div>
<div class="flex-auto -ml-12 sm:-ml-16 md:-ml-0">
<h3 class="text-lg font-bold -mt-5 md:-mt-0 text-gray-700 dark:text-gray-200">Created a New Event <span
class="font-medium text-purple-600 dark:text-gray-100">"Volunteer Activities"</span></h3>
<small class="text-gray-500 dark:text-gray-300">Yesterday . 8.49 PM</small>
</div>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
body {
font-family: 'Lato', sans-serif;
}
</style>