Cards - Dreams GYM is a premium Tailwind CSS admin dashboard template

With Subtitle

Card Title

Card Sub Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4">
                    <h5 class="mb-1">Card Title</h5>
                    <p>Card Sub Title</p>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
            </div>

With Button

Card Title

Lush green terraces cascade along misty hills

Add to cart

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4">
                    <h5>Card Title</h5>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-02.jpg" alt="card">
                </div> 
                <p class="mb-4">Lush green terraces cascade along misty hills</p> 
                <a href="#" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer inline-flex bg-[var(--surface)] border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white">
                    <i data-lucide="shopping-bag" class="w-4 h-4"></i>
                    Add to cart
                </a>
            </div>

With Links

Card Title

Lush green terraces cascade along misty hills

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4">
                    <h5>Card Title</h5>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-03.jpg" alt="card">
                </div> 
                <p class="mb-4">Lush green terraces cascade along misty hills</p> 
                <a href="#" class="inline-flex c-cyan underline text-center hover:bg-[var(--card2)] hover:text-white">
                    View More
                </a>
            </div>

Horizontal Right Align Content

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg md:flex block gap-4">
                <div class="md:max-w-[180px]">
                    <img class="size-full rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <div>
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Card Sub Title</p>
                    <p class="mb-4">Lush green terraces cascade along misty hills</p>
                    <p>Updated 2 days ago</p>
                </div>
            </div>

Horizontal Left Align Content

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg md:flex block md:justify-between gap-4">
                <div>
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Card Sub Title</p>
                    <p class="mb-4">Lush green terraces cascade along misty hills</p>
                    <p>Updated 2 days ago</p>
                </div> 
                <div class="md:max-w-[180px]">
                    <img class="size-full rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div>
            </div>

Left Align

Card Title

Lush green terraces cascade along misty hills

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4">
                    <h5 class="mb-1">Card Title</h5>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <p>Lush green terraces cascade along misty hills</p>
            </div>

Centre Align

Card Title

Lush green terraces cascade along misty hills

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4 text-center">
                    <h5>Card Title</h5>
                </div> 
                <div class="mb-4 flex justify-center items-center">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <p class="text-center">Lush green terraces cascade along misty hills</p>
            </div>

Right Align

Card Title

Lush green terraces cascade along misty hills

            
            
            <div class="p-5 border border-[var(--border)] rounded-lg">
                <div class="mb-4 text-end">
                    <h5>Card Title</h5>
                </div> 
                <div class="mb-4 flex justify-end items-end">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <p class="text-end">Lush green terraces cascade along misty hills</p>
            </div>

Horizontal Right Align Content

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

            
            
            <div class="border border-[var(--border)] rounded-lg md:flex block gap-4 overflow-hidden">
                <div class="md:max-w-[180px]">
                    <img class="size-full" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                <div class="p-5">
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Card Sub Title</p>
                    <p class="mb-4">Lush green terraces cascade along misty hills</p>
                    <p>Updated 2 days ago</p>
                </div>	
            </div>

Horizontal Left Align Content

Card Title

Card Sub Title

Lush green terraces cascade along misty hills

Updated 2 days ago

            
            
            <div class="border border-[var(--border)] rounded-lg md:flex block md:justify-between gap-4 overflow-hidden">
                <div class="p-5">
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Card Sub Title</p>
                    <p class="mb-4">Lush green terraces cascade along misty hills</p>
                    <p>Updated 2 days ago</p>
                </div> 
                <div class="md:max-w-[180px]">
                    <img class="size-full" src="assets/img/card/card-01.jpg" alt="card">
                </div>
            </div>

With Header

Card Title

Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.

            
            
            <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                <div class="px-5 py-4 bg-[var(--surface)] border-b border-[var(--border)]">
                    <h5>Card Title</h5>
                </div> 
                <div class="p-5">
                    <p>Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
                </div>
            </div>

With Footer

Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.

Card Title

            
            
            <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                <div class="p-5">
                    <p>Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
                </div> 
                <div class="px-5 py-4 bg-[var(--surface)] border-t border-[var(--border)]">
                    <h5>Card Title</h5>
                </div>
            </div>

Header & Footer

Card Title

Lush green terraces cascade along misty hills.

Card Title

            
            
            <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                <div class="px-5 py-4 bg-[var(--surface)] border-b border-[var(--border)]">
                    <h5>Card Title</h5>
                </div> 
                <div class="p-5">
                    <p>Lush green terraces cascade along misty hills.</p>
                </div> 
                <div class="px-5 py-4 bg-[var(--surface)] border-t border-[var(--border)]">
                    <h5>Card Title</h5>
                </div>
            </div>

Primary Color

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 bg-primary border border-[var(--border)] rounded-lg overflow-hidden">
                <p class="mb-4 text-white">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-white">View More</a>
            </div>

Light Color

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 bg-[var(--surface)] border border-[var(--border)] rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-dark dark:text-white">View More</a>
            </div>

Dark Color

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 bg-[var(--surface)] border border-[var(--border)] rounded-lg overflow-hidden">
                <p class="mb-4 text-white">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-white">View More</a>
            </div>

Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 bg-[var(--surface)] border border-[var(--border)] rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-dark dark:text-white">View More</a>
            </div>

Dotted Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-dashed border-[var(--border)] rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-dark dark:text-white">View More</a>
            </div>

Color Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-primary rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <a href="#" class="underline text-dark dark:text-white">View More</a>
            </div>

Left Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-[var(--border)] border-s-3 border-s-primary rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--card)] border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white">
                    <i data-lucide="shopping-bag" class="w-4 h-4"></i> Add to cart
                </button>
            </div>

Right Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-[var(--border)] border-e-3 border-e-primary rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
                <button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--card)] border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white">
                    <i data-lucide="shopping-bag" class="w-4 h-4"></i> Add to cart
                </button>
            </div>

Bottom Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-[var(--border)] border-b-3 border-b-primary rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--card)] border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white">
                    <i data-lucide="shopping-bag" class="w-4 h-4"></i> Add to cart
                </button>
            </div>

Top Border

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="p-5 border border-[var(--border)] border-t-3 border-t-primary rounded-lg overflow-hidden">
                <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p> 
                <button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--card)] border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white">
                    <i data-lucide="shopping-bag" class="w-4 h-4"></i> Add to cart
                </button>
            </div>

Glassmorphism

Lush green terraces cascade along misty hills, creating a peaceful place

            
            
            <div class="rounded-lg relative overflow-hidden">
                <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card"> 
                <div class="absolute bottom-0 px-5 py-4 w-full backdrop-blur-[10px]">
                    <p class="text-white">Lush green terraces cascade along misty hills, creating a peaceful place</p>
                </div>
            </div>

Tabs

Active Link Disabled

Card Title

Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.

            
            
            <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                <div class="flex items-center gap-2 px-5 py-4 bg-[var(--surface)] border-b border-[var(--border)]">
                    <a href="#" class="c-gold font-medium">Active</a>
                    <a href="#" class="text-dark dark:text-white font-medium">Link</a>
                    <a href="#" class="font-medium">Disabled</a>
                </div> 
                <div class="p-5">
                    <p class="text-dark dark:text-white font-semibold mb-1">Card Title</p>
                    <p class="text-[13px]">Lush green terraces cascade along misty hills, forming gentle layers that follow the curves of the land and create a calm and quite place.</p>
                </div>
            </div>

Image Overlay

Lush green terraces cascade along misty hills, creating a peaceful place

            
            
            <div class="rounded-lg relative">
                <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card"> 
                <div class="absolute bottom-0 px-5 py-4 w-full">
                    <p class="text-white">Lush green terraces cascade along misty hills, creating a peaceful place</p>
                </div>
            </div>

Card Group with Image

Card Title

Card Sub Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

Card Title

Card Sub Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

Card Title

Card Sub Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

            
            
            <div class="md:flex items-center block"> 
                <div class="p-5 border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none">
                <div class="mb-4">
                    <h5 class="mb-1">Card Title</h5>
                    <p>Card Sub Title</p>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                    <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
                </div> 
                <div class="p-5 border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none">
                <div class="mb-4">
                    <h5 class="mb-1">Card Title</h5>
                    <p>Card Sub Title</p>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                    <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
                </div> 
                <div class="p-5 border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none">
                <div class="mb-4">
                    <h5 class="mb-1">Card Title</h5>
                    <p>Card Sub Title</p>
                </div> 
                <div class="mb-4">
                    <img class="rounded-lg" src="assets/img/card/card-01.jpg" alt="card">
                </div> 
                    <p>Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
                </div>  
            </div>

Card Group without Image

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

Card Title

Lush green terraces cascade along misty hills, creating a peaceful Place.

            
            
            <div class="md:flex items-center block"> 
                <div class="p-5 bg-[var(--card)] border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
                    <a href="#" class="underline c-cyan">View More</a>
                </div> 
                <div class="p-5 bg-[var(--card)] border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
                    <a href="#" class="underline c-cyan">View More</a>
                </div> 
                <div class="p-5 bg-[var(--card)] border border-[var(--border)] first:rounded-s-lg last:rounded-e-lg rounded-none overflow-hidden">
                    <h5 class="mb-1">Card Title</h5>
                    <p class="mb-4">Lush green terraces cascade along misty hills, creating a peaceful Place.</p>
                    <a href="#" class="underline c-cyan">View More</a>
                </div> 
            </div>

Streched Link

Card Title

Lush green terraces cascade along misty hills, creating a peaceful place landscape

            
            
            <div class="md:flex block gap-6">
                <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                    <img src="assets/img/card/card-01.jpg" alt="card">
                    <div class="p-5">
                        <h5 class="mb-1">Card Title</h5>
                        <p> Lush green terraces cascade along misty hills, creating a peaceful place landscape </p>
                    </div>	
                </div>
                <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                    <img src="assets/img/card/card-01.jpg" alt="card">
                    <div class="p-5">
                        <p class="mb-2.5">Lush green terraces cascade along misty hills, creating a peaceful place landscape</p>
                        <button type="button" class="btn-sm flex items-center justify-center gap-1.5 cursor-pointer bg-[var(--surface)] font-semibold border border-[var(--border)] text-dark dark:text-white text-center hover:bg-[var(--card2)] hover:text-white" > Go Somewhere <i data-lucide="chevron-right" class="w-4 h-4"></i> </button>
                    </div>
                </div>
                <div class="border border-[var(--border)] rounded-lg overflow-hidden">
                    <img src="assets/img/card/card-01.jpg" alt="card">
                    <div class="p-5">
                        <p class="mb-2.5"> Lush green terraces cascade along misty hills, creating a peaceful place landscape </p>
                        <a href="#" class="underline c-cyan">View More</a>
                    </div>
                </div>
            </div>