I'm having difficulty in aligning an image to right-side inside a child div of a grid with tailwind-css. I have tried float-right
, right-0
, etc but none of them worked.
.next-visit {
background-color: #7645c1;
margin: 5px 1px;
border-radius: 15px;
padding: 10px;
color: #fff;
}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="next-visit">
<div class="grid grid-cols-2 gap-4">
<div>
<span class="text-sm">Next visit</span>
<p class="text-lg font-semibold">19 Oct 2021</p>
</div>
<div class="w-12">
<img src="https://placeimg.com/640/480/any" class="float-right">
</div>
</div>
</div>
Here is how you can do it using flexbox:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex items-center justify-center min-h-screen">
<div class="flex items-center justify-between h-24 text-white bg-purple-600 rounded-lg shadow-md">
<div class="flex flex-col px-4">
<span class="text-xs text-purple-300">Next visit</span>
<p class="text-2xl font-semibold uppercase">19 Oct 2021</p>
</div>
<img class="h-full py-2 pr-4 ml-8" src="https://placeimg.com/640/480/any"></img>
</div>
</div>