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.
Related
hello community im creating an app using tailwindcss avelte to upload pdf and images using pdfjs and canvas. when im uploading image the absolute element not covering the bottom side of the page
enter image description here
my code is
<div class="absolute w-4/6 justify-center flex items-end mx-auto z-10 bottom-0 inset-x-0">
<div class=" border-2 border-gray-100 flex px- py-4 w-full mx-auto bg-gray-200 xl:flex-nowrap rounded-lg flex-wrap">
<div class="container px-4 mx-auto flex items-center md:flex-row flex-col sm:right-0">
<div class=" flex w-full pr-0 text-center md:mb-0 md:w-auto md:pr-10 md:text-left">
<h1 class="title-font text-2xl font-bold text-red-600 md:text-2xl">Please verify document details before proceed</h1>
</div>
<div class="mx-auto flex flex-shrink-0 items-center space-x-6 md:ml-auto md:mr-0">
<button class=" inline-flex items-center rounded-lg border border-red-600 text-red-600 py-2 px-8 hover:bg-red-600 hover:text-white disabled:cursor-not-allowed disabled:bg-red-200" on:click={releaseDoc} id="release">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
<span class="title-font ml-2 font-bold text-base">Release</span>
</button>
<button type="button" class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" id="confirm">
{#if load}
<svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 ">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
/>
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Confirm</span>
</button>
<button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" on:click={getsignature} id="sign">
{#if load}
<svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Sign_ID</span>
</button>
<button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" id="publish" on:click|once={disablerelease} on:click={publishdoc}>
{#if load}
<svg role="status" class="mr-3 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
{:else}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12" />
</svg>
{/if}
<span class="title-font ml-2 font-bold text-base">Submit</span>
</button>
</div>
</div>
</div>
</div>
if you want this element to cover the whole width you must replace w-4/6 with w-full in first line.
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
What im trying to do is to change the color of the background button, as well with that change the text color that is inside that button.
The color of the button is changed, but the text color is not.
I tried to put hover as well in the text, but the color changed when the mouse is touching the text.
<li
class="text-gray-900 cursor-pointer select-none p-4 text-sm md:hover:red"
id="listbox-option-0"
role="option"
>
<button class="flex flex-col">
<div class="flex justify-">
<p class="font-normal">Published</p>
<span class="text-black">
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<p class="text-gray-500 mt-2">
This job posting can be viewed by anyone who has
the link.
</p>
</button>
</li>
So what I want to do is that as soon as the user touches the button, I want to change the all the text color that is inside of the button (even when the user doesn't touch the text)
How can I do it?
button:hover p{
color: red!important; // change the color you want
}
using group
<li
class="text-gray-900 cursor-pointer select-none p-4 text-sm group"
id="listbox-option-0"
role="option"
>
<button class="flex flex-col">
<div class="flex justify-">
<p class="font-normal group-hover:text-white">Published</p>
<span class="text-black">
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
</span>
</div>
<p class="text-gray-500 mt-2">
This job posting can be viewed by anyone who has
the link.
</p>
</button>
</li>
I have this output:
What I want to do is centering both those two button at top, and centering that Stop button in the bottom.
I am still new in TailwindCSS, and what I am guessing is I have to use flex, and then centered items in the div beneath that flex div.
For now this is my code:
<div class="space-y-0">
<div class="bg-green-300 w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
<img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
<div class="align-content-center text-center text-green-800">Eko S. W</div>
</div>
<div class="bg-blue-300 mr-2 w-32">
<div class="p-2 flex content-start">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
</svg>
</button>
</div>
<div class="text-center font-bold text-2xl text-white">04:51</div>
<div class="flex items-stretch p-2 items-center">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Stop
</button>
</div>
</div>
</div>
i used flex as you can see
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="space-y-0">
<div class="bg-green-300 w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
<img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
<div class="align-content-center text-center text-green-800">Eko S. W</div>
</div>
<div class="bg-blue-300 mr-2 w-32">
<div class="p-2 flex flex-col justify-center">
<div class="mx-auto"><button >
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
</svg>
</button></div>
<div class="text-center font-bold text-2xl text-white">04:51</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Stop
</button>
</div>
</div>
</div>
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.