Vertical Card

           
<div class="shadow-lg rounded flex flex-col relative w-72 mb-12 ml-12">
 
<div class="h-72">
 <img
 class="img-responsive rounded"
style="height: 100%"
src="/css/images/img_dress.png"
alt="dress"/>
 <div class="px-4 py-2 text-badge card-badge bg-indigo-300">new</div>
</div>
            
 
<div class="p-3">
<h3 class="text-grey-600 subtitle1 mb-2">Printed floral dress</h3>
<h4 class="subtitle2">Girls white printed dress</h4>
<h5 class="text-grey-600 mb-4">sold by marge</h5>
<p class="body1 mb-3">
White Flower print fit & flare dress. Square neck Short, puff sleeves.
Knee length in flared hem Crepe fabric with concealed zip closure.
 </p>
<div class="flex justify-around">
<button class="btn btn-square-solid btn-xs bg-indigo-500 text-white mr-3">
 <span class="fas fa-shopping-cart"></span>Add to cart
</button>
 <button class="btn btn-square-solid btn-xs bg-indigo-500 text-white">
 <span class="fas fa-heart"></span>Add to wishlist
</button>
 </div>
 </div>
</div>          
           
        

Vertical Card With Overlay

           
 <div
class="shadow-lg rounded flex flex-col relative w-72 mb-12 ml-12 overlay">
 <!-- image container -->
 <div class="h-72">
  <img
 class="img-responsive rounded"
 style="height: 100%"
 src="/css/images/img_dress.png"
alt="dress"
/>
 <div class="px-4 py-2 text-badge card-badge bg-grey-400">
  out of stock
</div>
</div>
<!-- card content container -->
<div class="p-3">
<h3 class="text-grey-600 subtitle1 mb-2">
Printed floral dress
</h3>
<h4 class="subtitle2">Girls white printed dress</h4>
 <h5 class="text-grey-600 mb-4">sold by marge</h5>
 <p class="body1 mb-3">
 White Flower print fit & flare dress. Square neck Short, puff
sleeves. Knee length in flared hem Crepe fabric with concealed
zip closure.
</p>
<div class="flex justify-around">
 <button
 class="btn btn-square-solid btn-xs bg-grey-500 text-white mr-3"
>
 <span class="fas fa-shopping-cart"></span> Add to cart
</button>
 <button
class="btn btn-square-solid btn-xs bg-grey-500 text-white"
>
 <span class="fas fa-heart"></span> Add to wishlist
</button>
</div>
</div>
 </div>
           
        

Horizontal Card

           
<div class="relative mt-5">
<div style="height: 100%; width: 80%" class="flex shadow rounded-md">
<div class="w-50-percent badge-container img-container">
<img
class="rounded-md h-full img-responsive"
src="/css/images/img_dress.png"
alt=""
srcset=""
/>
<div class="px-4 py-2 text-badge card-badge bg-indigo-300">new</div>
</div>
<div class="card-description p-6">
<h3 class="text-grey-600 subtitle1 mb-2">Printed floral dress</h3>
<h4 class="subtitle2">Girls white printed dress</h4>
<h5 class="text-grey-600 mb-4">sold by marge</h5>
<p class="body1 mb-3">
White Flower print fit & flare dress. Square neck Short, puff sleeves.
Knee length in flared hem Crepe fabric with concealed zip closure.
</p>
<div class="flex">
<button
                    class="btn btn-square-solid btn-md bg-indigo-400 text-white mr-3"
                  >
<span class="fas fa-shopping-cart"></span>Add to cart
</button>
          
<button class="btn btn-square-solid btn-md bg-indigo-400 text-white">
<span class="fas fa-heart"></span>Add to wishlist
</button>
</div>
</div>
 </div>
</div>