User Cards

Merri Diamond

New York USA

Phone : +1 23456 78910

Email : support@mannatthemes.com

Merri Diamond

Lead Manager

Phone : +1 23456 78910

Email : support@mannatthemes.com

Project : Bank data management


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">                                
    <div class="flex-auto p-4 text-center">
        <img src="assets/images/users/avatar-1.png" alt="" class="h-16 inline-block rounded-full mb-4">
        <h5 class="text-lg font-semibold text-slate-700 dark:text-gray-400 leading-3">Merri Diamond </h5>
        <span class="text-slate-500 text-sm">New York USA</span>
        <div class="mt-0 mb-2">
            <p class="text-sm text-slate-500 font-medium block"><span class="text-slate-700 dark:text-slate-400"><i class="ti ti-phone text-lg text-slate-500"></i> Phone  :</span>  +1 23456 78910</p>
            <p class="text-sm text-slate-500 font-medium block"><span class="text-slate-700 dark:text-slate-400"><i class="ti ti-mail text-lg text-slate-500"></i> Email  :</span> support@mannatthemes.com</p>
        </div>
        <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Project</button>
        <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Message</button>

    </div><!--end card-body-->
</div> <!--end card-->

<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full p-4 relative">
    <div class="flex flex-wrap content-between">
        <div class="flex items-center">
            <img src="assets/images/users/avatar-5.png" alt="" class="me-3 h-20 inline-block rounded-full">
            <div class="self-center">                                                
                <h5 class="text-xl font-semibold text-slate-700 dark:text-gray-400 leading-3">Merri Diamond</h5>
                <span class="text-slate-500 me-2 text-sm">Lead Manager</span>
            </div>
        </div>
        <div class="ms-auto self-center">
            <a href="#"><i class="ti ti-edit text-lg text-gray-500 dark:text-gray-400"></i></a>
            <a href="#"><i class="ti ti-trash text-lg text-red-500 dark:text-red-400"></i></a>
        </div>
    </div>
    <div class="mt-0">
        <p class="text-sm text-slate-500 font-medium block"><span class="text-slate-700 dark:text-slate-400"><i class="ti ti-phone text-lg text-slate-500"></i> Phone  :</span>  +1 23456 78910</p>
        <p class="text-sm text-slate-500 font-medium block"><span class="text-slate-700 dark:text-slate-400"><i class="ti ti-mail text-lg text-slate-500"></i> Email  :</span> support@mannatthemes.com</p>
    </div>
    <p class="text-sm text-slate-600 font-medium block mb-3 mt-2"><span class="text-slate-700 dark:text-slate-400">Project  :</span> Bank data management</p>
    <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Project</button>
    <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Message</button>                               
</div><!--end card-->

Header & Footer Cards

Header - Primary

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Footer - 2023 Robotech

Crypto Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Footer - 2023 Robotech


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <div class="border-b border-dashed bg-primary-500 text-white border-primary-500 rounded-t-md dark:border-slate-700 py-3 px-4 dark:text-slate-100">
        <h4 class="font-medium">Header - Primary</h4>
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <a href="#" class="block mb-3 text-[18px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
        <p class="font-normal text-gray-500 text-sm dark:text-gray-400">
            Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
        </p>
    </div><!--end card-body-->
    <div class="border-t border-dashed bg-slate-50 text-slate-500 border-slate-200 rounded-b-md dark:border-slate-700 dark:bg-slate-700/60 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium text-sm">Footer - 2023 Robotech</h4>
    </div><!--end footer-title-->
</div> <!--end card-->


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <div class="flex-auto p-4">
        <span class="bg-green-600/5 text-green-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">Crypto</span>
        <a href="#" class="block mb-3 text-[18px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
        <p class="font-normal text-gray-500 text-sm dark:text-gray-400 mb-2">
            Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
        </p>
        <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Message</button>
    </div><!--end card-body-->
    <div class="border-t border-dashed bg-slate-50 text-slate-500 border-slate-200 rounded-b-md dark:border-slate-700 dark:bg-slate-700/60 py-3 px-4 dark:text-slate-300/70">
        <h4 class="font-medium text-sm">Footer - 2023 Robotech</h4>
    </div><!--end footer-title-->
</div> <!--end card-->

Image Card

Title

30 May 2023

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

                                       
<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <img src="assets/images/widgets/1.jpg" alt="" class=" inline-block">                                
    <div class="border-b border-dashed  border-slate-200 rounded-t-md dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
        <div class="flex-none md:flex">
            <h4 class="font-medium flex-1 self-center mb-2 md:mb-0">Title</h4>
            <div>
                <img src="assets/images/users/avatar-6.png" alt="" class="h-7 w-7 rounded-full inline-block">
                <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">30 May 2023</span>
            </div>
        </div> 
    </div><!--end header-title-->
    <div class="flex-auto p-4">
        <p class="font-normal text-gray-500 text-sm dark:text-gray-400 mb-3">
            Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
        </p>
        <button class="inline-block focus:outline-none text-white hover:bg-primary-600 hover:text-white bg-primary-500 border border-primary-500 dark:bg-primary-500 dark:text-white dark:hover:text-white dark:border-primary-500 dark:hover:bg-primary-600  text-sm font-medium py-1 px-3 rounded">Go somewhere</button>
    </div><!--end card-body-->
</div> <!--end card-->

Horizontal Image Cards

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative mb-4">
    <div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12">
        <div class="sm:col-span-12  md:col-span-12 lg:col-span-4 xl:col-span-4 self-center">
            <img src="assets/images/products/logos/lam.png" alt="" class="inline-block ">
        </div>
        <div class="sm:col-span-12  md:col-span-12 lg:col-span-8 xl:col-span-8">
            <div class="border-b border-dashed border-slate-200 dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
                <h4 class="font-medium">Title</h4>
            </div><!--end header-title-->
            <div class="flex-auto p-4">
                <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
                <p class="font-normal text-gray-500 text-sm dark:text-gray-400">
                    Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
                </p>
            </div><!--end card-body-->
        </div>
    </div>                                
</div> <!--end card-->

<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full relative">
    <div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12">                                    
        <div class="sm:col-span-12  md:col-span-12 lg:col-span-8 xl:col-span-8">
            
            <div class="flex-auto p-4">
                <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
                <p class="font-normal text-gray-500 text-sm dark:text-gray-400">
                    Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
                </p>
            </div><!--end card-body-->
        </div>
        <div class="sm:col-span-12  md:col-span-12 lg:col-span-4 xl:col-span-4 self-center">
            <img src="assets/images/products/logos/polo.png" alt="" class="inline-block ">
        </div>
    </div>                                
</div> <!--end card-->

Group Cards

Card Group

30 May 2023

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Popular admin template you can use for your business.


<div class="grid md:grid-cols-12 lg:grid-cols-12 xl:grid-cols-12 gap-0 mb-4">
    <div class="sm:col-span-12  md:col-span-12 lg:col-span-4 ">
        <div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full h-full relative">
            <img src="assets/images/widgets/extra-card.png" alt="" class=" inline-block">                                
            <div class="border-b border-dashed  border-slate-200 rounded-t-md dark:border-slate-700 py-3 px-4 dark:text-slate-300/70">
                <div class="flex-none md:flex">
                    <h4 class="font-medium flex-1 self-center mb-2 md:mb-0">Card Group</h4>
                    <div>
                        <img src="assets/images/users/avatar-7.png" alt="" class="h-7 w-7 rounded-full inline-block">
                        <span class="bg-slate-600/5 text-slate-500 text-[11px] font-medium px-2.5 py-0.5 rounded h-5">30 May 2023</span>
                    </div>
                </div> 
            </div><!--end header-title-->
            <div class="flex-auto p-4">
                <p class="font-normal text-gray-500 text-sm dark:text-gray-400 mb-3">
                    Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
                </p>
                <button class="inline-block focus:outline-none text-slate-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Go somewhere</button>
            </div><!--end card-body-->
        </div> <!--end card-->
    </div><!--end col-->
    <div class="sm:col-span-12  md:col-span-12 lg:col-span-4 ">
        <div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full h-full relative">
            <img src="assets/images/widgets/extra-card.png" alt="" class=" inline-block">                                
            
            <div class="flex-auto p-4">
                <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
                <p class="font-normal text-gray-500 text-sm dark:text-gray-400 mb-3">
                    Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
                </p>
                <button class="inline-block focus:outline-none text-slate-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Go somewhere</button>
            </div><!--end card-body-->
        </div> <!--end card-->
    </div><!--end col-->
    <div class="sm:col-span-12  md:col-span-12 lg:col-span-4 ">
        <div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full h-full relative">
            <img src="assets/images/widgets/extra-card.png" alt="" class=" inline-block">  
            <div class="flex-auto p-4">
                <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
                <button class="inline-block focus:outline-none text-slate-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-slate-400 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-xs font-medium py-1 px-3 rounded">Go somewhere</button>
            </div><!--end card-body-->
        </div> <!--end card-->
    </div><!--end col--> 
</div>

Outline & Colorful Card

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.

Popular admin template you can use for your business.

Some quick example text the bulk of the card's content. It is a long will be distracted by the readable content.


<div class="bg-white dark:bg-slate-800 shadow  rounded-md w-full h-full relative">
    <div class="flex-auto p-4">
        <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-gray-800 dark:text-white">Popular admin template you can use for your business.</a>
        <p class="font-normal text-gray-500 text-sm dark:text-gray-400 mb-3">
            Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
        </p>
        <button class="inline-block focus:outline-none text-primary-500 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Go somewhere</button>
    </div><!--end card-body-->
</div> <!--end card-->


<div class="bg-primary-500 dark:bg-slate-800 shadow  rounded-md w-full h-full relative">
    <div class="flex-auto p-4">
        <a href="#" class="block mb-3 text-[16px] font-medium tracking-tight text-white dark:text-white">Popular admin template you can use for your business.</a>
        <p class="font-normal text-gray-200 text-sm dark:text-gray-400 mb-3">
            Some quick example text the bulk of the card's content. It is a long   will be distracted by the readable content.
        </p>
        <button class="inline-block focus:outline-none text-gray-200 hover:bg-primary-500 hover:text-white bg-transparent border border-gray-200 dark:bg-transparent dark:text-primary-500 dark:hover:text-white dark:border-gray-700 dark:hover:bg-primary-500  text-sm font-medium py-1 px-3 rounded">Go somewhere</button>
    </div><!--end card-body-->
</div> <!--end card-->

Starter

User Cards

Merri Diamond

Merri Diamond

Header & Footer Cards

Header - Primary

Footer - 2023 Robotech

Footer - 2023 Robotech

Image Card

Title

Horizontal Image Cards

Group Cards

Card Group

Outline & Colorful Card