Vertically align SVG to center of available space - css

I have a Tailwind card that displays an SVG icon to the left on large screens and on top on medium size screen and smaller.
I can align the icon along the x-axis. However, on the y-axis I can't get it right.
I used some padding classes, which do the job a bit. Since I can move the icon away from the top, but this also add extra space between the icon and the text underneath.
Is there an obvious way the center the icon in de middle/center along both the x- and y-axes of the available space?
You can have a look at the snippet to see how far I got till now.
<link href="https://www.windesheim.nl/assets/css/main.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet"/>
<!--start card image-->
<div class="max-w-md mx-auto bg-white shadow-md overflow-hidden md:max-w-2xl mt-6 mb-6">
<div class="md:flex">
<div class="md:flex-shrink-0">
<span class="icon fill-current inline-block text-brand-1-darker icon--lightbulb h-48 mx-auto drop-shadow3 w-full object-cover md:h-full md:w-48"><svg width="50%" height="50%"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" aria-hidden="true"
focusable="false">
<path
d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z">
</path>
</svg></span>
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Title</div>
<p class="block mt-1 text-lg leading-tight font-medium text-black">Lead</p>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--end card image-->


You can change the span wrapping the SVG to be flex, and then use items-center.
<link href="https://www.windesheim.nl/assets/css/main.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" rel="stylesheet" />
<!--start card image-->
<div class="mx-auto mt-6 mb-6 max-w-md overflow-hidden bg-white shadow-md md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<span class="icon text-brand-1-darker icon--lightbulb drop-shadow3 mx-auto flex h-48 w-full items-center fill-current object-cover md:h-full md:w-48"
><svg class="" width="50%" height="50%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" aria-hidden="true" focusable="false">
<path d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg
></span>
</div>
<div class="p-8">
<div class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Title</div>
<p class="mt-1 block text-lg font-medium leading-tight text-black">Lead</p>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!--end card image-->

Related

How to reduce the opacity of background image in tailwind css? [duplicate]

This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 4 months ago.
This post was edited and submitted for review 4 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I'm using flex in tailwind CSS to design the above section. I have placed a background image of React logo in this section. I've tried to change the opacity of the background image through the "opacity-25" class of tailwind but it changes the opacity of the whole section.
Please suggest me a feasible solution for this problem.
Note: Linear gradient isn't applicable here as it will be applied to the whole footer and affect the entire background. I just want to change the opacity of React Logo. I'm using custom classes for "basis". Here "basis-40%" means 40% width of the column.
<div class="flex">
<!-- First col -->
<div class="flex flex-col basis-40% border-solid border-green-900">
<div class="flex">
<img class="w-32 h-22" src="https://cdn.dribbble.com/users/7338576/screenshots/15684153/media/a52985d53636f23a01bed622925099c3.jpg?compress=1&resize=400x300">
<div class="ml-12 flex flex-col">
<div class="flex items-center">
<svg class="w-6 h-6 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<p class="text-phone-number-color text-lg font-bold tracking-27">0330 057 9957</p>
</div>
<p class="text-email-color my-3 text-lg font-semibold tracking-27">info#aidhumanity.co.uk</p>
<div class="flex">
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
<svg class="w-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<p class="text-footer-links-color text-base font-medium leading-26 tracking-24 mt-12">Aid Humanity is proud to be a non-profit organization that passes 100% of our donations to charitable causes around the world.</p>
</div>
<!-- Second column -->
<div class="flex flex-col basis-10% border-solid border-orange-900 ml-28">
<span class="mb-3 font-semibold text-sm tracking-21">ABOUT US</span>
<div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24">
<a class="link link-hover">Our Story</a>
<a class="link link-hover mt-1">Marketing</a>
<a class="link link-hover mt-1">Blog</a>
<a class="link link-hover mt-1">Zakat</a>
<a class="link link-hover mt-1 ">Get Involved</a>
<a class="link link-hover mt-1">Contact</a>
<a class="link link-hover mt-1 btn-primary">Donate</a>
</div>
</div>
<!-- Third column -->
<div class="flex flex-col basis-20% border-solidborder-2 border-orange-900 ml-28">
<span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">APPEALS</span>
<div class="text-footer-links-color flex flex-col text-base font-medium leading-30 tracking-24">
<a class="link link-hover mt-1">Build a Mosque</a>
<a class="link link-hover mt-1">Disaster & Emergency</a>
<a class="link link-hover mt-1">Appeals</a>
<a class="link link-hover mt-1">Water For All</a>
<a class="link link-hover mt-1">Sponsor an Orphan</a>
<a class="link link-hover mt-1">Hunger Appeal</a>
</div>
</div>
<!-- Fourth colmn -->
<div class="flex flex-col basis-10% border-solid border-yellow-900 ml-12">
<span class="mb-3 text-link-heading-color font-semibold text-sm tracking-21">NEWSLETTER</span>
<span class="label-text font-bold text-lg leading-28 tracking-45">Subscribe to the free newsletter and stay up-to date</span>
<div class="flex justify-center mt-5">
<div class="mb-3 xl:w-96">
<div class="input-group relative flex flex-wrap items-stretch w-full mb-4">
<input type="search" class="form-control relative min-w-0 block px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Your email" aria-label="Search" aria-describedby="button-addon2">
<button class="btn px-3 ml-2 py-2.5 bg-sky-400 text-white font-medium text-xs leading-tight uppercase rounded-lg shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center" type="button" id="button-addon2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
And my tailwind.config.js looks like:
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
"footer-links-color": "#8892AC",
"footer-background": "#102558",
"phone-number-color": "#00ADE9",
"email-color": "#FFC100",
"link-heading-color": "#FFFFFF"
},
fontFamily: {
"montserrat": "Montserrat"
},
lineHeight: {
'30': '30px',
'28': '28px',
'26': '26px',
},
letterSpacing: {
'06': '-.06',
'6': '-.6',
'9': '-.9',
'21': '-.21px',
'24': '-.24px',
'27': '-.27px',
'45': '-.45px',
},
flexBasis: {
'10%': '10%',
'15%': '15%',
'20%': '20%',
'30%': '30%',
'35%': '35%',
'40%': '40%',
'50%': '50%',
'60%': '60%',
'70%': '70%',
}
},
},
plugins: [],
}

Although I have never used the tailwind class library, I suspect the css to override the opacity can be done the same way overriding any other value in css can be achieved. Define the selector class at a higher level in the initialization sequence, specify the property and new value and tell the interpreter that it is an important change.
The key takeaway here is the reserved word important which is applied after the new value. This is done by writing a space !important at the end of hte line. More about how !important works can be found at the following website:
https://developer.mozilla.org/en-US/docs/Web/CSS/important

css not scrolling horizontally

I'm using tailwind css to style it.
It is implemented by watching yutube at the following url.
At about 29 minutes and 30 seconds into the video, I apply overflow-x-auto to the div tag to make it scroll horizontally. I also applied overflow-x-auto in the same way, but it doesn't scroll horizontally.
https://www.youtube.com/watch?v=u2jiRjyUbwA&t=176s
export default function Home() {
const categories = [
`Woman's Running Shoes`,
`Everyday Sneakers`,
`Slip-Ons`,
`High Tops`,
`Boat Shoes`,
`Flats`,
`Whether Repellent Shoes`,
`Woman's Running Shoes`,
];
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="px-4 py-1 bg-lime-800 text-white">
<p className="text-xs font-midium text-center">
We're raising prices on all products by $1 today in support of the
planet.{" "}
<a href="#" className="underline">
Learn More
</a>
</p>
</div>
<header className="px-4 py-4 flex item-center justify-between bg-white">
<div className="absolute inset-0 shadow-lg opacity-50" />
<div className="flex">
<button className="h-8 w-8">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div className="flex">Logo</div>
<div className="flex">
<button className="h-8 w-8">
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
</svg>
</button>
</div>
</header>
<main>
<div className="flex items-center justify-between px-8 py-4">
<div>
<div className="text-xs font-medium text-gray-900 space-x-1">
<a href="#" className="underline">
Home
</a>
<span>/</span>
</div>
<div className="">Women's Shoes</div>
</div>
<div className="flex">
<button className="h-6 w-6">
<svg
className="transform rotate-90"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 2 0 0 010-3.464V4a1 1 0 011-1z"></path>
</svg>
</button>
</div>
</div>
<div className="bg-gray-100 px-8 py-3 overflow-x-auto">
<div className="text-sm flex space-x-4">
{categories.map((category) => (
<a href="#" className="text-gray-400 whitespace-nowrap">
{category}
</a>
))}
</div>
</div>
</main>
</div>
);
}

You have an element with absolute on top of everything (first child of the <header> element).
<div className="absolute inset-0 shadow-lg opacity-50" />
Removing the element (or absolute) will allow you to interact with the scrollbar.

How to make Tailwind Cards with same height of the title?

So I am using Tailwind 1.9.6 and I want to make 3 cards with same height and titles of same height. I want to use flexbox and not grid because of the browser support.
I have managed to make the cards of same height regardless of the title length, but I would like the clock icon and the published time to also be always on the same height. Right now, the position of the clock icon and date depend on the title length.
How can that be achieved?
Here is the Codepen: https://codepen.io/vladoapost/pen/LYRYgMd
And the code:
<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>

I came up with a solution by adding flex flex-col directives to some of your containers (the one containing your image and the card body, and to the card body itself) and flex-1 to the card body (to make it take the entire left space) and to the a wrapping your h3.
I don't know if the written explanation is that clear but check the snippet, it should do a better job!
<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>

Bootstrap: why my pb pt py or mr mt mx don't work in bootstrap columns and also sm sx dosent work.?

Here is the complete code of the file. The Pb is not working and also the other padding and margin attributes. I had to do CSS for this. But I want to do it with bootstrap. sm sx md also not working. Anyone know any solution?
I just wanna know why bootstrap attributes are not working. why I need to use CSS for this.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
#header{
background: url(images/grass.jpg) center center/cover no-repeat;
}
** this for the cards that are in the form to show images.
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Pattern</title>
</head>
<body>
<h1 align="center">Pattern</h1>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<a href="" class="navbar-brand"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-binoculars-fill mr-3 mb-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 1A1.5 1.5 0 0 0 3 2.5V3h4v-.5A1.5 1.5 0 0 0 5.5 1h-1zM7 4v1h2V4h4v.882a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V13H9v-1.5a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5V13H1V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V4h4zM1 14v.5A1.5 1.5 0 0 0 2.5 16h3A1.5 1.5 0 0 0 7 14.5V14H1zm8 0v.5a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V14H9zm4-11H9v-.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5V3z"/>
</svg>PATTERN</a>
</div>
</nav>
<section id="header" class="jumbotron text-center text-light">
<h1 class="display-3 ">PATTERN</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
Do Something
Another thing
</section>
<!-- <section id="gallery1">
<div class="container">
<div class="card">
<img class="card-img-top" src="images/sea.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
</section>
-->
<section id="gallery2">
<div class="container">
<div class="card" style="width: auto; height: auto;">
<div class="row">
// cards to show image.
<div class="col-lg-`enter code here`4 pb-10">
<img class="card-img-top embed-responsive-item" src="images/sea.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
<div class="col-lg-4" style="width: 18rem;">
<img class="card-img-top" src="images/beach.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
<div class="col-lg-4" style="width: 18rem;">
<img class="card-img-top embed-responsive-item" src="images/gross.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
</div>
</div>
</div>
</ssection>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>`

try this code. pb-5 is working fine
<html lang="en">
<head>
<!-- Required meta tags -->
<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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<style>
#header{
background: url(images/grass.jpg) center center/cover no-repeat;
}
** this for the cards that are in the form to show images.
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Pattern</title>
</head>
<body>
<h1 align="center">Pattern</h1>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<a href="" class="navbar-brand"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-binoculars-fill mr-3 mb-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 1A1.5 1.5 0 0 0 3 2.5V3h4v-.5A1.5 1.5 0 0 0 5.5 1h-1zM7 4v1h2V4h4v.882a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V13H9v-1.5a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5V13H1V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V4h4zM1 14v.5A1.5 1.5 0 0 0 2.5 16h3A1.5 1.5 0 0 0 7 14.5V14H1zm8 0v.5a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V14H9zm4-11H9v-.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5V3z"/>
</svg>PATTERN</a>
</div>
</nav>
<section id="header" class="jumbotron text-center text-light">
<h1 class="display-3 ">PATTERN</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
Do Something
Another thing
</section>
<section id="gallery2">
<div class="container">
<div class="card" style="width: auto; height: auto;">
<div class="row">
// cards to show image.
<div class="col-lg-4 pb-5">
<img class="card-img-top embed-responsive-item" src="images/sea.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
<div class="col-lg-4" style="width: 18rem;">
<img class="card-img-top" src="images/beach.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
<div class="col-lg-4" style="width: 18rem;">
<img class="card-img-top embed-responsive-item" src="images/gross.jpg">
<div class="card-body">
<h5 class="card-title">First Image</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
Download
<a href="" class="btn btn-outline-danger btn-sm"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></a>
</div>
</div>
</div>
</div>
</div>
</ssection>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

First of all, you have a few errors in your HTML code so for starter use this HTML validator
Also you should know that the spacing system in bootstrap consists of 5 levels. p-1 to p-5 same goes for pt, pl, pr, and PB as well as margin spacing and how it works in bootstrap 4.
You were trying to apply pb-10 which does not exist. That's why it didn't work for you.
Also your closing tag for section is miss spelled.

prevent div from clipping image with minus margin

I have a profile card and I want to display the circle image at the top of it and slightly outside
when I give it a minus margin it clips the top of the image off,
This is what I am trying to achieve
But this is what I am getting
is there a way with a tailwind to tell it to overflow? Demo Codepen
<div class="font-sans leading-tight min-h-screen bg-grey-lighter p-8">
<div class="max-w-sm mx-auto bg-white rounded-lg overflow-hidden shadow-lg">
<div class="border-b px-4 pb-6">
<div class="text-center sm:text-left sm:flex mb-4">
<img class="h-32 w-32 rounded-full border-4 border-white -mt-16 mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="">
<div class="py-2">
<h3 class="font-bold text-2xl mb-1">Cait Genevieve</h3>
<div class="inline-flex text-grey-dark sm:flex items-center">
<svg class="h-5 w-5 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5.64 16.36a9 9 0 1 1 12.72 0l-5.65 5.66a1 1 0 0 1-1.42 0l-5.65-5.66zm11.31-1.41a7 7 0 1 0-9.9 0L12 19.9l4.95-4.95zM12 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
New York, NY
</div>
</div>
</div>
<div class="flex">
<button class="flex-1 rounded-full bg-blue text-white antialiased font-bold hover:bg-blue-dark px-4 py-2 mr-2">Follow</button>
<button class="flex-1 rounded-full border-2 border-grey font-semibold text-black px-4 py-2">Message</button>
</div>
</div>
<div class="px-4 py-4">
<div class="flex items-center text-grey-darker mb-4">
<svg class="h-6 w-6 text-grey mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
<span><strong class="text-black">12</strong> Followers you know</span>
</div>
<div class="flex">
<div class="flex flex-row-reverse justify-end mr-2">
<img class="border-2 border-white rounded-full h-10 w-10" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/31.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
<img class="border-2 border-white rounded-full h-10 w-10 -mr-2" src="https://randomuser.me/api/portraits/women/42.jpg" alt="">
</div>
<span class="flex items-center justify-center text-sm text-grey-darker font-semibold border-2 border-grey-light rounded-full h-10 w-10">+3</span>
</div>
</div>
</div>
</div>

The card element you have has a class of overflow-hidden on it. If you remove that then you should be able to see the full image. If you can't change that class for whatever reason then just add the property overflow:visible to the card element and you should be good to go.

Resources