Child 图片未在 parent 中增长
Child image not growing in parent
我的网站上有这张社交卡（我使用 tailwindcss）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://say-hi-dog.imgix.net/sayhidog/2179/posts/rDkbVVVGPNe11hTHTl7M6aV5V8emT8MJQ2yIepq7.jpeg?w=1200&h=1200&dpr=1&fit=max&auto=format" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</body>
</html>
我希望它看起来像这样：
为什么 parent 没有增长，而 child（图像）存在？
<div class="no-underline text-black overflow-hidden h-full relative">
<img src="https://say-hi-dog.imgix.net/sayhidog/2179/posts/rDkbVVVGPNe11hTHTl7M6aV5V8emT8MJQ2yIepq7.jpeg?w=1200&h=1200&dpr=1&fit=max&auto=format" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
我在这里做错了什么，parent 是 relative，child 元素是 absolute，parent 设置为 h-full，我除了parent自动增长？
您可以使用此代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bg-gray-200.absolute.h-full {
position: relative;
height: auto;
width: 100%;
}
.fill-current {
margin-top: 4px;
}
.bg-second.absolute {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/06181326/Shikoku-standing-outdoors.jpg" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/06181326/Shikoku-standing-outdoors.jpg" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我的网站上有这张社交卡（我使用 tailwindcss）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://say-hi-dog.imgix.net/sayhidog/2179/posts/rDkbVVVGPNe11hTHTl7M6aV5V8emT8MJQ2yIepq7.jpeg?w=1200&h=1200&dpr=1&fit=max&auto=format" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</body>
</html>
我希望它看起来像这样：
为什么 parent 没有增长，而 child（图像）存在？
<div class="no-underline text-black overflow-hidden h-full relative">
<img src="https://say-hi-dog.imgix.net/sayhidog/2179/posts/rDkbVVVGPNe11hTHTl7M6aV5V8emT8MJQ2yIepq7.jpeg?w=1200&h=1200&dpr=1&fit=max&auto=format" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
我在这里做错了什么，parent 是 relative，child 元素是 absolute，parent 设置为 h-full，我除了parent自动增长？
您可以使用此代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.bg-gray-200.absolute.h-full {
position: relative;
height: auto;
width: 100%;
}
.fill-current {
margin-top: 4px;
}
.bg-second.absolute {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/06181326/Shikoku-standing-outdoors.jpg" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="rounded-lg overflow-hidden mb-6 cursor-pointer bg-white h-auto" style="box-shadow: lightgrey 4px 4px 12px;">
<div class="no-underline text-black overflow-hidden h-full relative"><img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/06181326/Shikoku-standing-outdoors.jpg" class="bg-gray-200 absolute h-full">
<div class="w-12 h-12 bg-second absolute">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M6.642 15.096c-.5 0-1-.132-1.43-.37-.108-.061-.21-.135-.306-.198a2.394 2.394 0 01-.24-.205c-.057-.057-.336-.478-.38-.48a2.729 2.729 0 01-1.846-.994l-2.4 4.359c-.125.228.078.494.354.463l3.075-.344 1.565 2.505c.139.223.488.214.614-.014l2.442-4.432a2.51 2.51 0 01-.758-.38c-.22.059-.45.09-.69.09zm8.913-2.247c-.082.1-.174.195-.272.285a2.701 2.701 0 01-1.576.707c-.043.004-.32.425-.38.482-.118.113-.246.205-.388.31-.05.021-.102.063-.157.092a2.956 2.956 0 01-1.43.374c-.24 0-.473-.032-.69-.093-.22.164-.477.292-.758.38l2.442 4.432c.125.228.477.237.614.014l1.565-2.505 3.074.344c.277.031.48-.235.354-.463l-2.398-4.359zm-1.926-2.685c.183-.256.34-.527.47-.808a4.69 4.69 0 000-3.933 4.995 4.995 0 00-1.18-1.605 5.567 5.567 0 00-1.75-1.084 5.888 5.888 0 00-2.197-.396c-.743 0-1.465.134-2.143.396a5.493 5.493 0 00-1.75 1.084A5.063 5.063 0 003.9 5.423a4.69 4.69 0 000 3.933 5.02 5.02 0 001.18 1.608 5.568 5.568 0 001.75 1.084 5.876 5.876 0 001.846.39c.214.01.431.01.646 0a5.876 5.876 0 001.848-.39 5.493 5.493 0 001.75-1.084 5.3 5.3 0 00.71-.8zM9.442 4.688c.197-.625.793-1.015 1.332-.872.539.142.815.765.619 1.39-.196.624-.793 1.014-1.332.872-.537-.143-.815-.766-.619-1.39zm-2.218-.872c.54-.143 1.135.247 1.332.872.196.624-.082 1.247-.62 1.39-.538.142-1.134-.248-1.33-.873-.2-.624.08-1.247.618-1.39zM5.107 7.417c-.268-.601-.064-1.247.454-1.442.519-.195 1.156.136 1.426.738.267.601.064 1.247-.455 1.442-.518.195-1.156-.136-1.425-.738zm5.242 2.954c-.818-.205-1.754-.18-2.579-.025l-.119.025c-.438.11-1.434-.073-1.235-.914.198-.84 1.075-.805 1.315-1.937.071-.333.236-.663.546-.864.304-.197.713-.247 1.07-.16.267.066.5.217.66.424.136.179.216.388.262.6.24 1.134 1.117 1.096 1.316 1.937.196.84-.8 1.023-1.236.914zm1.117-2.216c-.518-.195-.724-.84-.454-1.442.267-.602.904-.933 1.425-.738.518.195.724.84.454 1.442-.27.602-.906.933-1.425.738z"></path>
<path d="M10.625 14.252c.069 0 .14.01.208.033.804.262 1.837-.132 2.2-.838.1-.195.306-.321.54-.33.851-.035 1.644-.76 1.69-1.54a.562.562 0 01.351-.483c.77-.337 1.197-1.285.91-2.02a.537.537 0 01.127-.583c.576-.579.576-1.606.01-2.187a.532.532 0 01-.124-.57c.286-.738-.144-1.686-.914-2.02a.571.571 0 01-.358-.494c-.018-.356-.203-.742-.544-1.054a1.85 1.85 0 00-1.135-.497.614.614 0 01-.525-.323c-.167-.319-.496-.608-.935-.776a2.107 2.107 0 00-.742-.14c-.187 0-.366.027-.528.08a.685.685 0 01-.637-.118C9.933.151 9.502 0 9.022 0h-.05c-.48 0-.91.15-1.195.392a.663.663 0 01-.635.117c-.16-.052-.34-.08-.528-.08-.24 0-.493.045-.742.141-.439.168-.768.455-.934.776a.62.62 0 01-.526.323 1.85 1.85 0 00-1.135.497c-.34.312-.525.698-.544 1.054a.58.58 0 01-.358.495c-.77.333-1.2 1.28-.914 2.019a.532.532 0 01-.123.57c-.57.58-.567 1.608.009 2.187.157.159.205.381.128.582-.288.736.139 1.684.909 2.021.205.09.34.275.352.483.045.78.838 1.505 1.69 1.54.233.01.439.137.54.33.024.048.052.094.084.14l.04.057c.44.58 1.35.878 2.077.641a.656.656 0 01.621.111c.327.269.773.392 1.209.386.457.006.886-.117 1.213-.386a.658.658 0 01.415-.144zm-1.603-1.074a6.91 6.91 0 01-2.504-.455 6.302 6.302 0 01-2.003-1.24 5.777 5.777 0 01-1.352-1.84 5.344 5.344 0 01-.496-2.255c0-.782.167-1.539.496-2.254a5.73 5.73 0 011.352-1.838 6.402 6.402 0 012.003-1.241A6.767 6.767 0 019.022 1.6c.852 0 1.681.153 2.458.455a6.301 6.301 0 012.003 1.24 5.823 5.823 0 011.352 1.84c.33.712.496 1.47.496 2.253 0 .782-.167 1.539-.496 2.254a5.453 5.453 0 01-.539.924 6 6 0 01-.813.916 6.387 6.387 0 01-2.006 1.241 6.734 6.734 0 01-2.117.447c-.112.004-.224.008-.338.008z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col pt-4">
<div class="flex px-4">
<div class="flex flex-col items-center w-1/6 mr-2">
<a href="#"><img src="https://sayhi.dog/profile.png" class="lozad bg-gray-400 bg-cover w-12 h-12 rounded-full shadow-lg z-50 m-2 zoom"></a>
</div>
<div class="px-2 pt-2 w-5/6">
<header class="flex flex-col">
<div class="flex items-center justify-between"><a href="#" class="font-bold text-black no-underline">
Jamie
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://sayhidog.test/og/post/221" target="_blank" class="flex my-2 rounded text-sm">
<p class="flex items-center text-facebook font-bold"><span class="hidden md:flex">Deel</span>
<div class="w-4 h-4 fill-current ml-2">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5.08 12.16A2.99 2.99 0 0 1 0 10a3 3 0 0 1 5.08-2.16l8.94-4.47a3 3 0 1 1 .9 1.79L5.98 9.63a3.03 3.03 0 0 1 0 .74l8.94 4.47A2.99 2.99 0 0 1 20 17a3 3 0 1 1-5.98-.37l-8.94-4.47z"></path>
</svg>
</div>
</div>
</p>
</a>
</div>
<!---->
<div class="flex items-center justify-between my-1">
<div class="flex items-center">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z"></path>
</svg>
</div>
</div> <span class="text-xs text-gray-600">
</span></div>
<!---->
</div>
<div class="flex items-center my-1">
<div class="w-4 h-4 mr-1 fill-current text-gray-700">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 20S3 10.87 3 7a7 7 0 1 1 14 0c0 3.87-7 13-7 13zm0-11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
</div>
</div> <a href="https://maps.google.com/?q=51.3234,4.94846" target="_blank" class="text-xs text-gray-600">
Amsterdam
</a></div>
</header>
<article class="py-4 text-black">
Lekker lopen op de wei van mijn paardjes
</article>
<footer class="flex text-sm border-t">
<div class="block flex px-4 py-2 items-center">
<div>
<div class="w-6 h-6 fill-current hover:text-red-500 cursor-pointer zoom text-gray-500">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"></path>
</svg>
</div>
</div>
</div> <span class="ml-2">2</span></div>
<div class="block flex px-4 py-2 items-center group cursor-pointer">
<div class="w-6 h-6 fill-current text-gray-500 group-hover:text-gray-700 zoom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 11v3l-3-3H8a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-1zm-3 2v2a2 2 0 0 1-2 2H6l-3 3v-3H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h2v3a4 4 0 0 0 4 4h6z"></path>
</svg>
</div>
</div> <span class="ml-2">0 reacties</span></div>
</footer>
</div>
</div>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>