Media Card Using Tailwind UI
A Media Card component crafted with Tailwind offers an attractive and structured layout for showcasing multimedia content, such as images or videos, enhancing visual appeal and engagement.
card
Loading component...
367 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/20638309-Media-card-component -->
<section class="flex flex-col items-center justify-center bg-[#F4F4F4]">
<div class="grid grid-flow-col grid-rows-2 gap-4 px-8 pt-12 md:grid-rows-1">
<div class="flex items-center justify-center">
<div class="p-6 bg-white shadow-lg rounded-2xl">
<div class="max-w-sm">
<div class="">
<img class="w-12 p-2 mb-4 rounded-md bg-yellow-50"
src="https://cdn-icons-png.flaticon.com/128/4725/4725970.png" alt="word icon" />
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
</div>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period from the foundation of the city of
Rome in 753 BC to the collapse of the Western Roman Empire in
476 AD and examines key politi...
</p>
</div>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="p-6 bg-white shadow-lg rounded-2xl">
<div class="max-w-sm">
<div class="">
<img class="w-12 p-2 mb-4 rounded-md bg-yellow-50"
src="https://cdn-icons-png.flaticon.com/128/4726/4726010.png" alt="word icon" />
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
</div>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period from the foundation of the city of
Rome in 753 BC to the collapse of the Western Roman Empire in
476 AD and examines key politi...
</p>
</div>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="grid grid-flow-col grid-rows-1 px-8 pt-12">
<div class="flex items-center justify-center">
<div class="p-6 bg-white shadow-lg rounded-2xl">
<div class="max-w-4xl">
<div class="">
<img class="w-12 p-2 mb-4 rounded-md bg-yellow-50"
src="https://cdn-icons-png.flaticon.com/128/4725/4725970.png" alt="word icon" />
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
</div>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period of history from the foundation of the city of Rome in 753 BC to
the collapse of the Western Roman
Empire in 476 AD and examines key political, economic, and military events that led to the
establishment of the dominant
Mediterranean empire.
</p>
</div>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="flex flex-col items-center justify-center bg-[#F4F4F4]">
<div class="grid grid-flow-col grid-rows-2 gap-4 px-8 pt-12 md:grid-rows-1">
<div class="flex items-center justify-center">
<div class="bg-white shadow-lg rounded-3xl">
<div class="max-w-sm">
<div class="relative">
<a href="#" class="group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="absolute w-16 h-16 mx-auto text-white transform -translate-x-1/2 -translate-y-1/2 shadow-xl stroke-current top-1/2 left-1/2 group-transition group-delay-150 group-duration-300 group-ease-in-out">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
</svg>
</a>
<img class="object-cover rounded-t-3xl "
src="https://images.unsplash.com/photo-1552432552-06c0b0a94dda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Q29sb3NzZXVtfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60"
alt="Colosseum">
</div>
<div class="p-6">
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period from the foundation of the city of
Rome in 753 BC to the collapse of the Western Roman Empire in
476 AD and examines key politi...
</p>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center">
<div class="bg-white shadow-lg rounded-3xl">
<div class="max-w-sm">
<div class="relative">
<a href="#" class="group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="absolute w-16 h-16 mx-auto text-white transform -translate-x-1/2 -translate-y-1/2 shadow-xl stroke-current top-1/2 left-1/2 group-transition group-delay-150 group-duration-300 group-ease-in-out">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
</svg>
</a>
<img class="object-cover rounded-t-3xl "
src="https://images.unsplash.com/photo-1556743595-0c9952ae2645?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjd8fENvbG9zc2V1bXxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Colosseum Night">
</div>
<div class="p-6">
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period from the foundation of the city of
Rome in 753 BC to the collapse of the Western Roman Empire in
476 AD and examines key politi...
</p>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid grid-flow-col grid-rows-1 px-8 pt-12 mb-12">
<div class="flex items-center justify-center">
<div class="bg-white shadow-lg rounded-3xl">
<div class="flex flex-col items-center max-w-sm sm:max-w-4xl sm:flex-row">
<div class="relative">
<a href="#" class="group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="absolute w-16 h-16 mx-auto text-white transform -translate-x-1/2 -translate-y-1/2 shadow-xl stroke-current top-1/2 left-1/2 group-transition group-delay-150 group-duration-300 group-ease-in-out">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
</svg>
</a>
<img class="object-cover rounded-3xl sm:h-72"
src="https://images.unsplash.com/photo-1626220611368-ad0a6bbd04ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Q29sb3NzZXVtfGVufDB8MHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
alt="Colosseum">
</div>
<div class="p-6">
<h3 class="font-bold text-gray-900">
The Rise of the Roman Empire
</h3>
<small class="bg-yellow-50 rounded-md p-1.5 text-gray-700 font-semibold text-xs">Updated:26
Jan 2023</small>
<p class="py-5 text-sm text-gray-600">
The lesson covers the period from the foundation of the city of
Rome in 753 BC to the collapse of the Western Roman Empire in
476 AD and examines key politi...
</p>
<div class="flex justify-between w-full">
<div class="flex items-center">
<a href="#" class="p-2 mr-3 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z">
</path>
</svg>
</a>
<a href="#" class="p-2 bg-blue-100 rounded-xl hover:bg-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
class="w-5 h-5 text-blue-400 stroke-current">
<path
d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z">
</path>
</svg>
</a>
</div>
<a href="#" class="flex items-center bg-blue-400 rounded-xl hover:bg-blue-500">
<span class="text-center px-4 py-2.5 text-white font-semibold text-sm">Download</span>
<span class="p-3 text-white bg-blue-600 fill-current rounded-r-xl">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4">
<path d="M3 19H21V21H3V19ZM13 9H20L12 17L4 9H11V1H13V9Z"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>