I want to have multiple of this Tailwind card component that I found. I'm trying to get ride of the weird gap between the two cards, I'm not sure whats causing it. I added the gap-0 to the parent div so I don't understand why it's still there. I'm also having trouble understanding why the content is not in the middle of page and starting at the top left.
Here is the Tailwind playground link: https://play.tailwindcss.com/wPqTqYp1jr
The m-4 in each component is causing margin between the two cards. You can remove the gap by adding mr-0 in the first and ml-0 in the second card.
Below is the code
<div class="grid grid-cols-2 gap-0">
<!-- component -->
<div class="m-4 mr-0 my-20 max-w-md rounded-lg bg-pink-100 py-4 px-8 shadow-lg">
<div class="-mt-16 flex justify-center md:justify-end">
<img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</div>
<div>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
</div>
<div class="mt-4 flex justify-end">
Bob Smith
</div>
</div>
<!-- component -->
<div class="ml-0 my-20 max-w-md rounded-lg bg-blue-100 py-4 px-8 shadow-lg">
<div class="-mt-16 flex justify-center md:justify-end ">
<img class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" />
</div>
<div>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
</div>
<div class="mt-4 flex justify-end">
Virginia Lucas
</div>
</div>
</div>
Use tailwind play and check the above code there . Also added bg-color to differentiate between the two cards.
EDIT -1
Just remove the grid grid-cols-2 gap-0 from the main div and add flex flex-row to that div. Then you will not see any gap even in fullscreen also.
Please preview here
This is my proposition:
Instead of grid i suggest using flexbox. I used additional properties to center the cards items-center justify-center h-screen
Remove all margin and padding from the first divs of the card: m-4 my-20 & py-4 px-8. Later, You can adjust it as desired.
You can now use gap property as much as You want ;-) In parent div.
Good Luck and Best regards !
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center justify-center h-screen gap-0">
<!-- component -->
<div class="max-w-md rounded-lg bg-white shadow-lg">
<div class="-mt-16 flex justify-center">
<img
class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
/>
</div>
<div>
<p class="mt-2 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
dolores deserunt ea doloremque natus error, rerum quas odio quaerat
nam ex commodi hic, suscipit in a veritatis pariatur minus
consequuntur!
</p>
</div>
<div class="mt-4 flex justify-end">
Bob Smith
</div>
</div>
<!-- component -->
<div class="max-w-md rounded-lg bg-white shadow-lg">
<div class="-mt-16 flex justify-center">
<img
class="h-14 w-14 rounded-full border-2 border-indigo-500 object-cover"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"
/>
</div>
<div>
<p class="mt-2 text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
dolores deserunt ea doloremque natus error, rerum quas odio quaerat
nam ex commodi hic, suscipit in a veritatis pariatur minus
consequuntur!
</p>
</div>
<div class="mt-4 flex justify-end">
<a href="#" class="text-sm font-medium text-indigo-500"
>Virginia Lucas</a
>
</div>
</div>
</div>
</body>
</html>
How do you change the color of a card border using Daisy UI?
I can see that bordered adds a black border around my cards. But when I try various tailwind css classes, such as border-white the border does not change.
In the docs, you can see the example using card-bordered. You can add border-white to that.
<div class="card card-bordered border-white">
<figure>
<img src="https://picsum.photos/id/1005/400/250">
</figure>
<div class="card-body">
<h2 class="card-title">Top image
<div class="badge mx-2 badge-secondary">NEW</div>
</h2>
<p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.</p>
<div class="justify-end card-actions">
<button class="btn btn-secondary">More info</button>
</div>
</div>
</div>
I have a flash message that appears when a page is loaded on successful auth and I'm trying to figure out how I can center it horizontally on any device. I am using the TailwindCSS to adjust the placement of the div and have tried fixed and absolute to make sure it appears above my content, but using an attribute like left:50% moves it too far over and margin:auto doesn't center this element. Is there a better approach to what I am trying to do? Is it possible to do with TailwindCSS or will I have to write some CSS for this?
Code:
<div>
<div className="mx-auto sm:w-3/4 md:w-2/4 absolute" id="signin-success-message">
<div className="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" className="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
<div>
...
</div>
</div>
use inset-x-0 with mx-auto
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-x-0 top-10" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
To have vertical centring:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-0 flex items-center" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
For me it worked like this (div is centered both vertically and horizontally). Also I wanted the modal content to scroll if the content was longer than the div's height:
<div
v-if="isModalOpen"
class="fixed z-20 h-3/4 w-1/2 m-auto inset-x-0 inset-y-0 p-4 bg-white rounded-sm overflow-y-scroll"
>
<button #click.prevent="closeModal">Close me</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas
omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia
voluptatibus nostrum eligendi dignissimos minima itaque, praesentium
corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur
adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi
animi sunt molestiae eos a voluptatem exercitationem voluptate quo,
consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti
laborum quis molestias nulla, reprehenderit eos odio recusandae
consectetur velit saepe explicabo quibusdam quidem? Corrupti.
</div>
use inset-x-0 max-w-max mx-auto
if you don't have element full wide....
The following works for me:
<div className=" bg-gray-500 bg-opacity-75 transition-opacity flex flex-col justify-center items-center">
{children}
</div>
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
How do I fill a column vertically. I currently have this app.
I want to spand the vertical items vertically to take the rest of the page. I have tried for hours reading the documents and checking other posts but I just don't knows what is wrong. I'm just started using angular material and I'm new to the concept of flex box.
this is my code.
<body ng-cloak layout="column" ng-app="app">
<div layout="row" flex>
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-1dp" md-is-locked-open="true">
<md-list>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Alex
</md-button>
</md-list-item>
<md-list-item>
<md-button ng-click="">
<md-icon md-font-set="material-icons">face</md-icon>
Tara
</md-button>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi at consequuntur doloremque
dolores
dolorum eaque, exercitationem expedita facere fugiat ipsam nemo possimus quod recusandae repellendus, saepe
sequi
vitae, voluptas!
</p>
</md-content>
</div>
Code Pen Example
I just notice that the parent div .app-wrapper causes the problem, but I want to keep it.
You're looking for viewport height. In your case, you could apply to md-sidenav via class:
.full-height{
height: 100vh;
}