Cards - Tempalte.Vault | Tailwind Component Library

Discover a sleek, responsive card layout for blog listings built with Tailwind CSS. This component features a clean, adaptable design for smooth browsing and a seamless reading experience on any device.

Breadcrumbs improve site navigation, guiding users through content levels and enhancing usability and SEO. Ideal for simplifying complex website structures.

Default card

Use this simple card to the heading with its short description into your webpage and this redirects to another page thoughtout your website.

See on Github

Top Innovations in AI for 2023

Discover groundbreaking advancements in artificial intelligence that are shaping the future of industries worldwide.

HTML


<a href="#" class="no-underline block max-w-sm p-6 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow hover:bg-[#f5f5f5] dark:bg-[#212121a4] dark:border-[#212121] dark:hover:bg-[#212121]">
  <h5 class="mb-2 text-2xl font-bold tracking-tight text-[#000] dark:text-white">Top Innovations in AI for 2023</h5>
  <p class="font-normal text-[#212121] dark:text-[#bebebe]">Discover groundbreaking advancements in artificial intelligence that are shaping the future of industries worldwide.</p>
</a>

Card with button

Here you can add a button in your cards and use this in your website seamlessly.

See on Github

Top Innovations in AI for 2023

Discover groundbreaking advancements in artificial intelligence that are shaping the future of industries worldwide.

Learn more

HTML


<div class="max-w-sm p-6 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow dark:bg-[#212121a4] dark:border-[#212121]">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-[#000] dark:text-white">Top Innovations in AI for 2023</h5>    
    <p class="mb-3 font-normal text-[#212121] dark:text-[#bebebe]">Discover groundbreaking advancements in artificial intelligence that are shaping the future of industries worldwide.</p>
    <a href="#" class="no-underline inline-flex items-center px-3 py-2 text-sm font-medium text-center text-[#fff] dark:text-[#212121] bg-[#ff0000] rounded-lg hover:bg-[#fb5252] focus:ring-2 focus:outline-none focus:ring-[#ff0000] dark:bg-[#ffff00] dark:hover:bg-[#f5f592] dark:focus:ring-[#ffff00]">
        Learn more
        <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
        </svg>
    </a>
</div>

Card with icons

See on Github

Need help with Claim?

Go to this step-by-step guideline process on how to certify for your weekly benefits:

See our guideline

HTML


<div class="max-w-sm p-6 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow dark:bg-[#212121a4] dark:border-[#212121]">
    <svg class="w-7 h-7 text-[#212121] dark:text-[#bebebe] mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"></path>
    </svg>    
        <h5 class="mb-2 text-2xl font-semibold tracking-tight text-[#000] dark:text-white">Need help with Claim?</h5>
    <p class="mb-3 font-normal text-[#212121] dark:text-[#bebebe]">Go to this step-by-step guideline process on how to certify for your weekly benefits:</p>
    <a href="#" class="inline-flex no-underline font-bold items-center text-[#ff0000] dark:text-[#ffff00] hover:underline">
        See our guideline
        <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
            <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
        </svg>
    </a>
</div>

Request card

See on Github

Alexis Green

Lead Developer

Connect Send Message

HTML


<div class="w-full min-w-72 max-w-sm bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow dark:bg-[#212121a4] dark:border-[#212121]">
    <div class="flex justify-end px-4 pt-4">
        <button id="dropdownButton" data-dropdown-toggle="dropdown" class="inline-block text-[#212121] dark:text-[#bebebe] hover:bg-[#f5f5f5] dark:hover:bg-[#212121] focus:ring-2 focus:outline-none focus:ring-[#f5f5f5] dark:focus:ring-[#212121] rounded-lg text-sm p-1.5" type="button">
            <span class="sr-only">Open dropdown</span>
            <svg class="w-5 h-5 text-[#ff0000] dark:text-[#ffff00]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 3">
                <path d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"></path>
            </svg>
        </button>        
        <div id="dropdown" class="z-10 hidden text-base list-none bg-[#fff] divide-y divide-[#c1c1c1] rounded-lg shadow w-44 dark:bg-[#212121]">
            <ul class="py-2" aria-labelledby="dropdownButton">
                <li >
                    <a href="#" class="block px-4 py-2 text-sm text-[#212121] hover:bg-[#f5f5f5] dark:hover:bg-[#212121] dark:text-[#bebebe] dark:hover:text-white">Edit Profile</a>
                </li>
                <li >
                    <a href="#" class="block px-4 py-2 text-sm text-[#212121] hover:bg-[#f5f5f5] dark:hover:bg-[#212121] dark:text-[#bebebe] dark:hover:text-white">Download Data</a>
                </li>
                <li >
                    <a href="#" class="block px-4 py-2 text-sm text-[#e74c3c] hover:bg-[#f5f5f5] dark:hover:bg-[#212121] dark:text-[#bebebe] dark:hover:text-white">Deactivate</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="flex flex-col items-center pb-10">
        <img class="w-24 h-24 mb-3 rounded-full shadow-lg" src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Bonnie image"></img>
        <h5 class="mb-1 text-xl font-medium text-[#000] dark:text-white">Alexis Green</h5>
        <span class="text-sm text-[#212121] dark:text-[#bebebe]">Lead Developer</span>
        <div class="flex mt-4 md:mt-6">
            <a href="#" class="no-underline inline-flex items-center px-4 py-2 text-sm font-medium text-center text-[#fff] dark:text-[#212121] bg-[#ff0000] rounded-lg hover:bg-[#f5f592] focus:ring-2 focus:outline-none focus:ring-[#ffff00] dark:bg-[#ffff00] dark:hover:bg-[#f5f592] dark:focus:ring-[#ffff00]">Connect</a>
            <a href="#" class="no-underline py-2 px-4 ms-2 text-sm font-medium text-[#212121] focus:outline-none bg-[#fff] rounded-lg border border-[#c1c1c1] hover:bg-[#f5f5f5] hover:text-[#0073e6] focus:z-10 focus:ring-2 focus:ring-[#c1c1c1] dark:focus:ring-[#212121] dark:bg-[#212121] dark:text-[#bebebe] dark:border-[#212121] dark:hover:text-[#ffff00] dark:hover:bg-[#212121]">Send Message</a>
        </div>
    </div>
</div>

Card with form

See on Github

HTML


<div class="w-full lg:min-w-96 max-w-sm p-4 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow sm:p-6 md:p-8 dark:bg-[#212121a4] dark:border-[#212121]">
    <form class="space-y-6" action="#" autoComplete="off">
        <h5 class="text-xl font-medium text-[#000] dark:text-white">Sign in to Template.Vault</h5>
        <div >
            <label htmlFor="email" class="block mb-2 text-sm font-medium text-[#212121] dark:text-white">Your email</label>
            <input type="email" name="email" id="email" class="bg-[#f5f5f5] border border-[#c1c1c1] text-[#212121] text-sm rounded-lg focus:ring-[#0073e6] focus:border-[#0073e6] block w-full p-2.5 dark:bg-[#212121] dark:border-[#212121] dark:placeholder-[#bebebe] dark:text-white" placeholder="name@company.com" required="true" autoComplete="off"></input>
        </div>
        <div >
            <label htmlFor="password" class="block mb-2 text-sm font-medium text-[#212121] dark:text-white">Your password</label>
            <input type="password" name="password" id="password" placeholder="••••••••" class="bg-[#f5f5f5] border border-[#c1c1c1] text-[#212121] text-sm rounded-lg focus:ring-[#0073e6] focus:border-[#0073e6] block w-full p-2.5 dark:bg-[#212121] dark:border-[#212121] dark:placeholder-[#bebebe] dark:text-white" required="true" autoComplete="off"></input>
        </div>
        <div class="flex items-start">
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-[#c1c1c1] rounded bg-[#f5f5f5] focus:ring-3 focus:ring-[#0073e6] dark:bg-[#212121] dark:border-[#212121] dark:focus:ring-[#0073e6] dark:ring-offset-[#212121] dark:focus:ring-offset-[#212121]" required="true"></input>
                </div>
                <label htmlFor="remember" class="ms-2 text-sm font-medium text-[#212121] dark:text-[#bebebe]">Remember me</label>
            </div>
            <a href="#" class="ms-auto text-sm text-[#ff0000] hover:underline dark:text-[#ffff00]">Lost Password?</a>
        </div>
        <button type="submit" class="w-full text-[#fff] dark:text-[#212121] bg-[#ff0000] hover:bg-[#fa4d4d] focus:ring-2 focus:outline-none focus:ring-[#ff0000] font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-[#ffff00] dark:hover:bg-[#f5f592] dark:focus:ring-[#ffff00]">Login to your account</button>
        <div class="text-sm font-medium text-[#212121] dark:text-[#bebebe]">
            Not registered? <a href="#" class="text-[#ff0000] hover:underline dark:text-[#ffff00]">Create account</a>
        </div>
    </form>
</div>

Product card

See on Github

MacBook Pro 16-inch, Apple M1 Pro chip, 16GB RAM, 512GB SSD

5.0

$2,499 Add to cart

HTML


<div class="w-full max-w-sm m-5 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow dark:bg-[#212121a4] dark:border-[#212121]">
    <a href="#">
        <img class="p-8 rounded-t-lg mix-blend-multiply" src="/macbook.jpeg" alt="product image"></img>
    </a>
    <div class="px-5 pb-5">
        <a href="#" class="no-underline">
            <h5 class="text-xl font-semibold tracking-tight text-[#000] dark:text-white">MacBook Pro 16-inch, Apple M1 Pro chip, 16GB RAM, 512GB SSD</h5>
        </a>
        <div class="flex items-center mt-2.5 mb-5">
            <div class="flex items-center space-x-1 rtl:space-x-reverse">
                <svg class="w-4 h-4 text-[#ff0000] dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"></path>
                </svg>
                <svg class="w-4 h-4 text-[#ff0000] dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"></path>
                </svg>
                <svg class="w-4 h-4 text-[#ff0000] dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"></path>
                </svg>
                <svg class="w-4 h-4 text-[#ff0000] dark:text-yellow-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"></path>
                </svg>
                <svg class="w-4 h-4 text-[#c1c1c1] dark:text-[#bebebe]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 20">
                    <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"></path>
                </svg>
            </div>
            <span class="bg-[#f5f5f5] text-[#0073e6] text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-[#424242] dark:text-[#0073e6] ms-3">5.0</span>
        </div>
        <div class="flex items-center justify-between">
            <span class="text-3xl font-bold text-[#000] dark:text-white">$2,499</span>
            <a href="#" class="text-[#fff] bg-[#ff0000] hover:bg-[#fa4d4d] focus:ring-2 focus:outline-none focus:ring-[#ff0000] font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-[#ffff00] dark:hover:bg-[#f5f592] dark:focus:ring-[#ffff00]">Add to cart</a>
        </div>
    </div>
</div>

Card with image

Dive into our curated card listing, featuring insightful articles on web design, development tips, and industry trends. Stay updated with practical advice and inspiration to elevate your digital projects.

See on Github

Title Here

Tag 1 Tag 2 Tag 3

A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.

HTML


   <div class="max-w-4xl mx-auto p-6">
    <div class="flex items-center pb-4">
      <div class="w-1/3 aspect-square">
        <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="rounded-full w-full h-auto object-cover aspect-square"></img>
      </div>
      <div class="w-2/3 pl-4">
        <h2 class="text-2xl font-bold dark:text-white text-black mt-0">Title Here</h2>
        <div class="flex space-x-2 my-2">
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 1</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 2</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 3</span>
        </div>
        <p class="dark:text-[#bebebe] text-[#212121] mb-4">
          A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.
        </p>
        <div class="flex justify-start">        
          <a href="#" class="px-4 py-1 rounded dark:bg-[#ffff00] bg-[#ff0000] text-white dark:text-[#212121] hover:bg-[#fb5454] dark:hover:bg-[#f4f469] transition duration-200 no-underline">Read More</a>
        </div>
      </div>
    </div>
  </div>

Alternate Cards

Explore our alternate-direction card layout, featuring images, headings, and brief descriptions with call-to-action buttons. This design offers a visually engaging, modern experience, guiding readers through each featured article.

See on Github

Title Here

Tag 1 Tag 2 Tag 3

A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.

Title Goes Here

Tag 1 Tag 2 Tag 3

A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.

HTML


   <div class="max-w-4xl mx-auto p-4">
    <div class="flex items-center pb-4">
      <div class="w-1/3 aspect-square">
        <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="rounded-full w-full h-auto object-cover aspect-square"></img>
      </div>
      <div class="w-2/3 pl-4">
        <h2 class="text-2xl font-bold dark:text-white text-black mt-0">Title Here</h2>
        <div class="flex space-x-2 my-2">
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 1</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 2</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 3</span>
        </div>
        <p class="dark:text-[#bebebe] text-[#212121] mb-4">
          A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.
        </p>
        <div class="flex justify-start">        
          <a href="#" class="px-4 py-1 rounded dark:bg-[#ffff00] bg-[#ff0000] text-white dark:text-[#212121] hover:bg-[#fb5454] dark:hover:bg-[#f4f469] transition duration-200 no-underline">Read More</a>
        </div>
      </div>
    </div>
  </div>
   <div class="max-w-4xl mx-auto p-4">
    <div class="flex items-center pb-4 justify-end">
      <div class="w-2/3 pr-4">
        <h2 class="text-2xl font-bold dark:text-white text-right text-black mt-0">Title Goes Here</h2>
        <div class="flex space-x-2 my-2 justify-end">
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 1</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 2</span>
          <span class="dark:bg-[#ffff00] dark:text-[#212121] bg-[#ff0000] text-white text-xs px-2 py-1 rounded">Tag 3</span>
        </div>
        <p class="dark:text-[#bebebe] text-[#212121] mb-4 text-right">
          A short description of the blog post goes here, providing a brief overview of the content and engaging the reader's interest.
        </p>
        <div class="flex justify-end">
          <a href="#" class="px-4 py-1 rounded dark:bg-[#ffff00] bg-[#ff0000] text-white dark:text-[#212121] hover:bg-[#fb5454] dark:hover:bg-[#f4f469] transition duration-200 no-underline">Read More</a>
        </div>
      </div>
      <div class="w-1/3 aspect-square">
        <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="rounded-full w-full h-auto object-cover aspect-square"></img>
      </div>
    </div>
  </div>

testimoinial cards

See on Github

Incredible Performance

The MacBook Pro with M1 chip has transformed my workflow. Unmatched speed and reliability.

John Doe

Tech Enthusiast

Great for Designers

The Retina display and color accuracy on the MacBook make it perfect for design work!

Alice Johnson

Lead Designer at Apple

Outstanding Battery Life

Even with heavy use, the MacBook Pro lasts for hours. Perfect for working on the go.

Michael Smith

Software Developer at Google

Seamless Integration

It integrates effortlessly into my workflow and enhances productivity. A fantastic investment!

Sarah Lee

CTO at Microsoft

HTML


<div class="grid border border-[#c1c1c1] rounded-lg shadow-sm dark:border-[#212121] md:grid-cols-2 bg-[#eaeaea] dark:bg-[#212121a4]">
    <figure class="flex flex-col items-center justify-center p-8 text-center bg-[#fff] border-b border-[#c1c1c1] rounded-t-lg md:rounded-t-none md:rounded-ss-lg md:border-e dark:bg-[#212121a4] dark:border-[#212121] m-0">
        <blockquote class="max-w-2xl mx-auto mb-4 text-[#212121] lg:mb-8 dark:text-[#bebebe]">
            <h3 class="text-lg font-semibold text-[#000] dark:text-white">Incredible Performance</h3>
            <p class="my-4">The MacBook Pro with M1 chip has transformed my workflow. Unmatched speed and reliability.</p>
        </blockquote>
        <figcaption class="flex items-center justify-center">
            <img class="rounded-full w-9 h-9 object-cover" src="/avatar1.jpg" alt="profile picture"></img>
            <div class="space-y-0.5 font-medium dark:text-white text-left rtl:text-right ms-3">
                <div >John Doe</div>
                <div class="text-sm text-[#212121] dark:text-[#bebebe]">Tech Enthusiast</div>
            </div>
        </figcaption>    
    </figure>
    <figure class="m-0 flex flex-col items-center justify-center p-8 text-center bg-[#fff] border-b border-[#c1c1c1] md:rounded-se-lg dark:bg-[#212121a4] dark:border-[#212121]">
        <blockquote class="max-w-2xl mx-auto mb-4 text-[#212121] lg:mb-8 dark:text-[#bebebe]">
            <h3 class="text-lg font-semibold text-[#000] dark:text-white">Great for Designers</h3>
            <p class="my-4">The Retina display and color accuracy on the MacBook make it perfect for design work!</p>
        </blockquote>
        <figcaption class="flex items-center justify-center">
            <img class="rounded-full w-9 h-9 object-cover" src="/avatar2.jpg" alt="profile picture"></img>
            <div class="space-y-0.5 font-medium dark:text-white text-left rtl:text-right ms-3">
                <div >Alice Johnson</div>
                <div class="text-sm text-[#212121] dark:text-[#bebebe]">Lead Designer at Apple</div>
            </div>
        </figcaption>    
    </figure>
    <figure class="m-0 flex flex-col items-center justify-center p-8 text-center bg-[#fff] border-b border-[#c1c1c1] md:rounded-es-lg md:border-b-0 md:border-e dark:bg-[#212121a4] dark:border-[#212121]">
        <blockquote class="max-w-2xl mx-auto mb-4 text-[#212121] lg:mb-8 dark:text-[#bebebe]">
            <h3 class="text-lg font-semibold text-[#000] dark:text-white">Outstanding Battery Life</h3>
            <p class="my-4">Even with heavy use, the MacBook Pro lasts for hours. Perfect for working on the go.</p>
        </blockquote>
        <figcaption class="flex items-center justify-center">
            <img class="rounded-full w-9 h-9 object-cover" src="/avatar3.jpg" alt="profile picture"></img>
            <div class="space-y-0.5 font-medium dark:text-white text-left rtl:text-right ms-3">
                <div >Michael Smith</div>
                <div class="text-sm text-[#212121] dark:text-[#bebebe]">Software Developer at Google</div>
            </div>
        </figcaption>    
    </figure>
    <figure class="flex m-0 flex-col items-center justify-center p-8 text-center bg-[#fff] border-[#c1c1c1] rounded-b-lg md:rounded-se-lg dark:bg-[#212121a4] dark:border-[#212121]">
        <blockquote class="max-w-2xl mx-auto mb-4 text-[#212121] lg:mb-8 dark:text-[#bebebe]">
            <h3 class="text-lg font-semibold text-[#000] dark:text-white">Seamless Integration</h3>
            <p class="my-4">It integrates effortlessly into my workflow and enhances productivity. A fantastic investment!</p>
        </blockquote>
        <figcaption class="flex items-center justify-center">
            <img class="rounded-full w-9 h-9 object-cover" src="/avatar4.png" alt="profile picture"></img>
            <div class="space-y-0.5 font-medium dark:text-white text-left rtl:text-right ms-3">
                <div >Sarah Lee</div>
                <div class="text-sm text-[#212121] dark:text-[#bebebe]">CTO at Microsoft</div>
            </div>
        </figcaption>    
    </figure>
</div>

Pricing card

See on Github

Professional Plan

$ 99 /month

Up to 5 team members
50GB Cloud storage
Priority integration support
Custom design files
Extended API Access
Comprehensive documentation
Round-the-clock support

HTML


  <div class="w-full max-w-sm p-4 bg-[#eaeaea] border border-[#c1c1c1] rounded-lg shadow sm:p-8 dark:bg-[#212121a4] dark:border-[#212121]">
    <h5 class="mb-4 text-xl font-medium text-[#212121] dark:text-[#bebebe]">Professional Plan</h5>
    <div class="flex items-baseline text-[#000] dark:text-white">
        <span class="text-3xl font-semibold">$</span>
        <span class="text-5xl font-extrabold tracking-tight">99</span>
        <span class="ms-1 text-xl font-normal text-[#212121] dark:text-[#bebebe]">/month</span>
    </div>
    <ul role="list" class="space-y-5 my-7">
        <li class="flex items-center">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff0000] dark:text-[#ffff00]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Up to 5 team members</span>
        </li>
        <li class="flex">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff0000] dark:text-[#ffff00]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">50GB Cloud storage</span>
        </li>
        <li class="flex">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff0000] dark:text-[#ffff00]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Priority integration support</span>
        </li>
        <li class="flex line-through decoration-grey">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff000091] dark:text-[#bebebe]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Custom design files</span>
        </li>
        <li class="flex line-through decoration-grey">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff000091] dark:text-[#bebebe]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Extended API Access</span>
        </li>
        <li class="flex line-through decoration-grey">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff000091] dark:text-[#bebebe]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Comprehensive documentation</span>
        </li>
        <li class="flex line-through decoration-grey">
            <svg class="flex-shrink-0 w-4 h-4 text-[#ff000091] dark:text-[#bebebe]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"></path>
            </svg>
            <span class="text-base font-normal leading-tight text-[#212121] dark:text-[#bebebe] ms-3">Round-the-clock support</span>
        </li>
    </ul>
    <button type="button" class="text-white bg-[#ff0000] hover:bg-[rgb(250,79,79)] focus:ring-2 focus:outline-none focus:ring-blue-200 dark:text-[#212121] dark:bg-[#ffff00] dark:hover:bg-[#f5f592] dark:focus:ring-[#ffff00] font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center">Choose Professional Plan</button>
</div>

Pricing card with features

Here you go with our latest pricing cards

See on Github

Starter

per user/month

Ideal for individuals who want to get started with basic email tasks and acsess.

Sending emails up to 10 recipients/day
Inbox and Outbox storage up to 100 latest emails
Draft not available
scheduling not available
Mail tracking not available
analytics not available
Creating email templates
Basic email template available
Can not import custom code

Get started

HTML


  <div class="rounded-lg bg-[#A9BA9D] backdrop-blur-[6px] overflow-hidden"><div class="flex gap-5 flex-col rounded-lg rounded-b-none pricing-card-border"><div class="flex justify-between items-center px-8 pt-8"><div class="flex items-center gap-[10px]"><p class="text-[20px] leading-[30px] font-semibold">Starter</p></div></div><div class="mt-1 flex flex-col px-8"><div class="text-[80px] leading-[96px] tracking-[-1.6px] font-medium">$0</div><div class="font-medium text-[12px]">per user/month</div></div><div class="px-8"><div data-orientation="horizontal" role="none" class="shrink-0 h-[1px] w-full bg-border"></div></div><div class="px-8 text-[16px] leading-[24px]">Ideal for individuals who want to get started with basic email tasks and acsess.</div></div><ul class="p-8 flex flex-col gap-4"><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Sending emails up to 10 recipients/day</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Inbox and Outbox storage up to 100 latest emails</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Draft not available</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">scheduling not available</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Mail tracking not available</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">analytics not available</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Creating email templates</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Basic email template available</span></li><li class="flex gap-x-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="lucide lucide-circle-check h-6 w-6 text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span class="text-base">Can not import custom code</span></li></ul><div class="px-8 mb-8"><a class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-md font-medium ring-offset-background transition-colors focus:ring-ring focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative bg-[#006400] text-white h-11 px-5 py-[10px] w-full" href="#">Get started</a></div></div>

Animated card

Experience our animated cards featuring an image, title, description, and call-to-action. Designed for smooth transitions, engaging visuals, and interactive appeal.

See on Github

Inspiring Ideas

Experience our animated cards featuring an image, title, description, and call-to-action. Designed for smooth transitions, engaging visuals, and interactive appeal.

HTML


  <div class="relative w-80 bg-[#eaeaea] border-[#c1c1c1] border dark:bg-[#212121a4] dark:border-[#212121] aspect-[1/1.2] rounded-3xl overflow-hidden shadow-lg group">
          <div class="w-full aspect-[16/11] relative">
            <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" height="500" width="500" class="w-full h-full object-cover group-hover:scale-105 transition-all duration-200"></img>
            <div class="absolute flex items-center justify-center w-full h-full top-0 left-0 bg-gray-800 bg-opacity-30">
              <h2 class="text-3xl font-bold text-white">Inspiring Ideas</h2>
            </div>
          </div>
          <div class="flex items-center justify-center w-full aspect-[16/8.1] p-5 relative overflow-hidden">
            <p class="text-black dark:text-[#bebebe] text-center group-hover:opacity-0 group-hover:-translate-y-16 transition-all duration-200 select-none overflow-hidden line-clamp-4 !m-0">
            Experience our animated cards featuring an image, title, description, and call-to-action. Designed for smooth transitions, engaging visuals, and interactive appeal.
            </p>
            <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full">
              <button class="flex gap-2 items-center p-2 rounded-full bg-[#ff0000] text-white dark:bg-[#ffff00] dark:text-[#212121] opacity-0 group-hover:opacity-100 transition-all duration-200 translate-y-16 group-hover:translate-y-0 group/edit overflow-hidden">
                <svg version="1.1" class="h-6 w-6 group-hover/edit:-translate-x-16 group-hover/edit:w-0 transition-all duration-200 dark:fill-[#212121] fill-[#fff]" fill="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <g ><path class="st2" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm0 121.6C32.2 121.6 6.4 95.8 6.4 64S32.2 6.4 64 6.4s57.6 25.8 57.6 57.6-25.8 57.6-57.6 57.6zM49.2 38.4 73.6 64 49.2 89.6h13.5L86.4 64 62.7 38.4H49.2z"></path></g>
                </svg>
                <span class="transition-transform duration-200 dark:font-bold">Explore More</span>
                <svg version="1.1" class="h-6 group-hover/edit:translate-x-0 group-hover/edit:w-6 translate-x-16 w-0 transition-all duration-200 fill-[#fff] dark:fill-[#212121]" fill="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
                  <g ><path class="st2" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm0 121.6C32.2 121.6 6.4 95.8 6.4 64S32.2 6.4 64 6.4s57.6 25.8 57.6 57.6-25.8 57.6-57.6 57.6zM49.2 38.4 73.6 64 49.2 89.6h13.5L86.4 64 62.7 38.4H49.2z"></path></g>
                </svg>
              </button>
            </div>
          </div>
        </div>

Vertical Blog Listing

Here's an alternative design for your blog listing component that is responsive and features a different layout. This design places the image above the text content for a fresh look while ensuring it's still responsive.

See on Github

Blog Post

Tag 1 Tag 2 Tag 3

Explore our latest blog posts filled with insights, tips, and trends in web design and development to elevate your projects.

HTML


<div class="max-w-4xl mx-auto p-6">
  <div class="border dark:border-[#212121] bg-[#eaeaea] border-[#c1c1c1] dark:bg-[#212121a4] rounded-lg overflow-hidden shadow-md">
    <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="w-full h-64 object-cover rounded-t-lg"></img>
    <div class="p-4">
      <h2 class="text-2xl font-bold dark:text-white text-black">Blog Post</h2>
      <div class="flex space-x-2 my-3">
        <span class="bg-[#ff0000] dark:bg-[#ffff00] text-[#fff] dark:text-[#212121] text-xs px-2 py-1 rounded">Tag 1</span>
        <span class="bg-[#ff0000] dark:bg-[#ffff00] text-[#fff] dark:text-[#212121] text-xs px-2 py-1 rounded">Tag 2</span>
        <span class="bg-[#ff0000] dark:bg-[#ffff00] text-[#fff] dark:text-[#212121] text-xs px-2 py-1 rounded">Tag 3</span>
      </div>
      <p class="dark:text-[#bebebe] mb-4 text-[#212121]">
        Explore our latest blog posts filled with insights, tips, and trends in web design and development to elevate your projects.
      </p>
      <a href="#" class="bg-[#ff0000] dark:bg-[#ffff00] text-white dark:text-[#212121] px-4 py-2 rounded hover:bg-[#ffff55] transition duration-200 no-underline">Read More</a>
    </div>
  </div>
</div>

Inspiring Content

Here's another design for your blog listing component that incorporates different colors and is optimized for dark mode. This version uses a card-style layout with a light background, and it adapts well to dark mode themes.

See on Github

Inspiring Ideas

Uncover the latest insights and innovative trends in web design and development, empowering your next project with creativity and functionality.

Inspiring Ideas

Uncover the latest insights and innovative trends in web design and development, empowering your next project with creativity and functionality.

HTML


<div class="max-w-4xl mx-auto p-6 grid grid-cols-2 space-x-4">
  <div class="border border-[#c1c1c1] dark:border-[#212121] rounded-lg overflow-hidden shadow-lg bg-[#eaeaea] dark:bg-[#212121a4] transition duration-300">
    <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="w-full h-64 object-cover rounded-t-lg"></img>
    <div class="p-4">
      <h2 class="text-2xl font-bold text-black dark:text-white">Inspiring Ideas</h2>      
      <p class="text-[#212121] dark:text-[#bebebe] mb-4">
        Uncover the latest insights and innovative trends in web design and development, empowering your next project with creativity and functionality.
      </p>
      <a href="#" class="bg-[#ff0000] dark:bg-[#ffff00] text-white dark:text-[#212121] px-4 py-2 rounded hover:bg-[#ffff55] transition duration-200 no-underline">Read More</a>
    </div>
  </div>
  <div class="border border-[#c1c1c1] dark:border-[#212121] rounded-lg overflow-hidden shadow-lg bg-[#eaeaea] dark:bg-[#212121a4] transition duration-300">
    <img src="https://gratisography.com/wp-content/uploads/2024/01/gratisography-cyber-kitty-800x525.jpg" alt="Blog Image" class="w-full h-64 object-cover rounded-t-lg"></img>
    <div class="p-4">
      <h2 class="text-2xl font-bold text-black dark:text-white">Inspiring Ideas</h2>      
      <p class="text-[#212121] dark:text-[#bebebe] mb-4">
        Uncover the latest insights and innovative trends in web design and development, empowering your next project with creativity and functionality.
      </p>
      <a href="#" class="bg-[#ff0000] dark:bg-[#ffff00] text-white dark:text-[#212121] px-4 py-2 rounded hover:bg-[#ffff55] transition duration-200 no-underline">Read More</a>
    </div>
  </div>  
</div>

Components

cards - Template.Vault

Default card

Top Innovations in AI for 2023

Card with button

Top Innovations in AI for 2023

Card with icons

Need help with Claim?

Request card

Alexis Green

Card with form

Sign in to Template.Vault

Product card

MacBook Pro 16-inch, Apple M1 Pro chip, 16GB RAM, 512GB SSD

Card with image

Title Here

Alternate Cards

Title Here

Title Goes Here

testimoinial cards

Incredible Performance

Great for Designers

Outstanding Battery Life

Seamless Integration

Pricing card

Professional Plan

Pricing card with features

Animated card

Inspiring Ideas

Vertical Blog Listing

Blog Post

Inspiring Content

Inspiring Ideas

Inspiring Ideas