如何制作标题高度相同的 Tailwind 卡片？
How to make Tailwind Cards with same height of the title?
所以我使用的是 Tailwind 1.9.6，我想制作 3 张相同高度和相同高度标题的卡片。由于浏览器支持，我想使用 flexbox 而不是 grid。
无论标题长度如何，我都设法制作了相同高度的卡片，但我希望时钟图标和发布时间也始终处于相同高度。现在，时钟图标和日期的位置取决于标题长度。
如何实现？
这是代码笔：https://codepen.io/vladoapost/pen/LYRYgMd
代码：
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>
我想出了一个解决方案，将 flex flex-col 指令添加到您的某些容器（包含您的图像和卡体的容器，以及卡体本身）和 flex-1 到卡体（让它占据整个左边 space）和 a 包裹你的 h3.
我不知道书面解释是否清楚，但检查片段，它应该做得更好！
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>
所以我使用的是 Tailwind 1.9.6，我想制作 3 张相同高度和相同高度标题的卡片。由于浏览器支持，我想使用 flexbox 而不是 grid。
无论标题长度如何，我都设法制作了相同高度的卡片，但我希望时钟图标和发布时间也始终处于相同高度。现在，时钟图标和日期的位置取决于标题长度。
如何实现？
这是代码笔：https://codepen.io/vladoapost/pen/LYRYgMd
代码：
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg
class="opacity-75 mr-2"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="12"
height="12"
viewBox="0 0 97.16 97.16"
style="enable-background: new 0 0 97.16 97.16;"
xml:space="preserve"
>
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>
我想出了一个解决方案，将 flex flex-col 指令添加到您的某些容器（包含您的图像和卡体的容器，以及卡体本身）和 flex-1 到卡体（让它占据整个左边 space）和 a 包裹你的 h3.
我不知道书面解释是否清楚，但检查片段，它应该做得更好！
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto">
<div class="flex flex-col sm:flex-row justify-between mx-4 md:mx-0 lg:-mx-2 flex-wrap">
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Teneriffa</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Gran Canaria</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
<div class="rounded overflow-hidden shadow-lg flex-1 bg-white sm:mx-2 md:mx-1 lg:mx-2 w-full sm:w-1/3 lg:pt-0 border-b-4 border-blue-500 mb-10 flex flex-col">
<img src="https://images.unsplash.com/photo-1573748240263-a4e9c57a7fcd" alt="People" class="w-full object-cover h-32 sm:h-48 md:h-64" />
<div class="p-4 md:p-6 bg-white flex flex-col flex-1">
<p class="text-blue-500 font-semibold text-xs mb-1 leading-none">Fuerteventura</p>
<a href="http://example.test/2020/11/26/hello-world/" class="flex-1">
<h3 class="font-semibold mb-2 text-xl leading-tight sm:leading-normal">Hello world!</h3>
</a>
<div class="text-sm flex items-center">
<svg class="opacity-75 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="12" height="12" viewBox="0 0 97.16 97.16" style="enable-background: new 0 0 97.16 97.16;" xml:space="preserve">
<path
d="M48.58,0C21.793,0,0,21.793,0,48.58s21.793,48.58,48.58,48.58s48.58-21.793,48.58-48.58S75.367,0,48.58,0z M48.58,86.823 c-21.087,0-38.244-17.155-38.244-38.243S27.493,10.337,48.58,10.337S86.824,27.492,86.824,48.58S69.667,86.823,48.58,86.823z"
></path>
<path d="M73.898,47.08H52.066V20.83c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v30.25c0,2.209,1.791,4,4,4h25.832 c2.209,0,4-1.791,4-4S76.107,47.08,73.898,47.08z"></path>
</svg>
<p class="leading-none">26.11.2020, 10:10 Uhr</p>
</div>
</div>
</div>
</div>
</div>