Tailwind CSS. SCSS. From the code above, we have created the container into which the components of the card will be contained. We have then added another container to enable us add space around the components that will be inside our card. We will do the same to the subsequent cards later on. We added the header using the <header> element. 169. 1 Free Component (s) Grid cards are small card-sized boxes containing important information. Grid cards give an elegant and minimal look to your web page. Tailwind grid card components can be used in flat design, pin-style design, and print. They also help with separating images, text, and headings so that details are presented neatly.. Jul 02, 2021 The flip-card-outer class is given the width and height properties. Obviously, these can be altered depending on use case. The layer remains static and unaffected by rotational transforms. The flip-card-inner class uses relative position to give the underlying sides of the card a boundary or reference point. This is the layer that rotates 180 .. We can be more precise also by using calc. Changing the flex-basis value to use calc would look something like this .card flex 0 1 calc (25 - 1em); The cool thing with this is that the browser will grab 25 of the space and remove 1em from it, which makes the cards slightly smaller.Tailwind uses grid-col and grid-row property which is an alternative to the grid-template-columns property.