- Components
- Cards
Card 1
CodeSimple
Mauris nisi felis, placerat in volutpat id, varius et sapien.
<!-- card 1 -->
<div class="max-w-[19rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none">
<div class="py-7 px-6">
<div class="bg-[#3b3f5c] mb-5 inline-block p-3 text-[#f1f2f3] rounded-full">
<svg> ... </svg>
</div>
<h5 class="text-[#3b3f5c] text-xl font-semibold mb-4 dark:text-white-light">Simple</h5>
<p class="text-white-dark">Mauris nisi felis, placerat in volutpat id, varius et sapien.</p>
</div>
</div>
Card 2
Code
CLI Based
Etiam sed augue ac justo tincidunt posuere. Vivamus euismod eros, nec risus malesuada.
<!-- card 2 -->
<div class="max-w-[19rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none">
<div class="py-7 px-6">
<div class="-mt-7 mb-7 -mx-6 rounded-tl rounded-tr h-[215px] overflow-hidden">
<img src="/assets/images/profile-28.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<h5 class="text-[#3b3f5c] text-xl font-semibold mb-4 dark:text-white-light">CLI Based</h5>
<p class="text-white-dark">Etiam sed augue ac justo tincidunt posuere. Vivamus euismod eros, nec risus malesuada.</p>
<button type="button" class="btn btn-primary mt-6">Explore More</button>
</div>
</div>
Card 3
Code
Luke Ivory
Manager
Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
<!-- card 3 -->
<div class="max-w-[18rem] w-full bg-[#3b3f5c] shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none p-5">
<div class="text-center text-black-light">
<div class="mb-5 w-20 h-20 rounded-full overflow-hidden mx-auto">
<img src="/assets/images/profile-34.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<h5 class="text-white text-[15px] font-semibold mb-2">Luke Ivory</h5>
<p>Manager</p>
<div class="flex justify-center items-center text-[#e2a03f] my-4">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
</div>
<p class="font-semibold italic">Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.</p>
</div>
</div>
Card 4
Code
Luke Ivory
Manager
4.5Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
<!-- card 4 -->
<div class="max-w-[30rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none">
<div class="p-5 flex items-center flex-col sm:flex-row">
<div class="mb-5 w-20 h-20 rounded-full overflow-hidden">
<img src="/assets/images/profile-34.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<div class="flex-1 ltr:sm:pl-5 rtl:sm:pr-5 text-center sm:text-left">
<h5 class="text-[#3b3f5c] text-[15px] font-semibold mb-2 dark:text-white-light">Luke Ivory</h5>
<p class="mb-2 text-white-dark">Manager</p>
<span class="badge bg-primary rounded-full">4.5</span>
<p class="font-semibold text-white-dark mt-4 sm:mt-8">Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.</p>
</div>
</div>
</div>
Card 5
CodeMaecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
Luke Ivory
Manager
<!-- card 5 -->
<div class="max-w-[20rem] w-full bg-secondary shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-0 dark:bg-secondary-dark-light dark:shadow-none p-5">
<div class="text-black-light">
<p class="font-semibold mb-5">Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.</p>
<div class="flex">
<div class="mb-5 w-14 h-14 rounded-full overflow-hidden mx-auto">
<img src="/assets/images/profile-34.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<div class="flex-1 ltr:pl-4 rtl:pr-4">
<h5 class="text-white text-[15px] font-semibold mb-1">Luke Ivory</h5>
<p>Manager</p>
</div>
</div>
</div>
</div>
Card 6
CodeMaecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.
Luke Ivory
Manager
<!-- card 6 -->
<div class="max-w-[20rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none p-5 ">
<div class="text-[#515365] dark:text-white-light">
<p class="font-semibold italic mb-5">Maecenas nec mi vel lacus condimentum rhoncus dignissim egestas orci. Integer blandit porta placerat. Vestibulum in ultricies.</p>
<div class="flex">
<div class="flex-1">
<h5 class="text-[#3b3f5c] text-[15px] font-bold mb-1.5 dark:text-white-light">Luke Ivory</h5>
<p class="text-white-dark mb-1.5">Manager</p>
<div class="flex justify-start items-center text-[#e2a03f]">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
</div>
</div>
</div>
</div>
</div>
Card 7
CodeRating
(4.3)
(94)
<!-- card 7 -->
<div class="max-w-[20rem] w-full bg-primary shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-0 dark:bg-primary-dark-light dark:shadow-none p-5">
<div class="text-center font-semibold">
<h5 class="text-white text-xl font-bold mb-5 dark:text-white-light">Rating</h5>
<p class="text-white mb-5 text-base">(4.3)</p>
<div class="flex justify-center items-center gap-1 text-[#e2a03f]">
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<svg> ... </svg>
<span class="text-white ltr:ml-1 rtl:mr-1">(94)</span>
</div>
</div>
</div>
Card 8
CodePlaced Order
IN PROGRESS
+5 more
60%
<!-- card 8 -->
<div class="max-w-[24rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none p-5">
<div class="flex justify-between mb-5">
<h6 class="text-[#0e1726] font-semibold text-base dark:text-white-light">Placed Order</h6>
<span class="badge bg-primary/10 text-primary py-1.5 dark:bg-primary dark:text-white">IN PROGRESS</span>
</div>
<div class="flex items-center justify-start -space-x-3 rtl:space-x-reverse mb-5">
<img class="w-9 h-9 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-[#515365] shadow-[0_0_15px_1px_rgba(113,106,202,0.30)] dark:shadow-none" src="/assets/images/profile-34.jpeg" alt="image" />
<img class="w-9 h-9 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-[#515365] shadow-[0_0_15px_1px_rgba(113,106,202,0.30)] dark:shadow-none" src="/assets/images/profile-34.jpeg" alt="image" />
<img class="w-9 h-9 rounded-full overflow-hidden object-cover ring-2 ring-white dark:ring-[#515365] shadow-[0_0_15px_1px_rgba(113,106,202,0.30)] dark:shadow-none" src="/assets/images/profile-34.jpeg" alt="image" />
<span class="bg-white rounded-full px-2 py-1 text-primary text-xs shadow-[0_0_20px_0_#d0d0d0] dark:shadow-none dark:bg-[#0e1726] dark:text-white">+5 more</span>
</div>
<div class="text-right">
<span class="text-primary font-semibold">60%</span>
<div class="bg-[#ebedf2] dark:bg-[#0e1726] rounded-full w-full h-1.5 mt-1.5">
<div class="rounded-full bg-primary h-full" style="width: 60%;"></div>
</div>
</div>
</div>
Card 9
Code
25 Sep 2020
How to Start a Blog in 5 Easy Steps.
Vestibulum vestibulum tortor ut eros tincidunt, ut rutrum elit volutpat.
AG
Luke Ivory
51
250
<!-- card 9 -->
<div class="max-w-[22rem] w-full bg-white shadow-[4px_6px_10px_-3px_#bfc9d4] rounded border border-[#e0e6ed] dark:border-[#1b2e4b] dark:bg-[#191e3a] dark:shadow-none">
<div class="py-7 px-6">
<div class="-mt-7 mb-7 -mx-6 rounded-tl rounded-tr h-[260px] overflow-hidden">
<img src="/assets/images/profile-28.jpeg" alt="image" class="w-full h-full object-cover" />
</div>
<p class="text-primary text-xs mb-1.5 font-bold">25 Sep 2020</p>
<h5 class="text-[#3b3f5c] text-[15px] font-bold mb-4 dark:text-white-light">How to Start a Blog in 5 Easy Steps.</h5>
<p class="text-white-dark ">Vestibulum vestibulum tortor ut eros tincidunt, ut rutrum elit volutpat.</p>
<div class="relative flex justify-between mt-6 pt-4 before:w-[250px] before:h-[1px] before:bg-[#e0e6ed] before:inset-x-0 before:top-0 before:absolute before:mx-auto dark:before:bg-[#1b2e4b]">
<div class="flex items-center font-semibold">
<div class="w-9 h-9 rounded-full overflow-hidden inline-block ltr:mr-2 rtl:ml-2.5">
<span class="flex w-full h-full items-center justify-center bg-[#515365] text-[#e0e6ed]">AG</span>
</div>
<div class="text-[#515365] dark:text-white-dark">Luke Ivory</div>
</div>
<div class="flex font-semibold">
<div class="text-primary flex items-center ltr:mr-3 rtl:ml-3">
<svg> ... </svg>
51 </div>
<div class="text-primary flex items-center">
<svg> ... </svg>
250 </div>
</div>
</div>
</div>
</div>
© . Vristo All rights reserved.