Cards

Cards Component

A responsive portfolio card component with a brutalist design style, utilizing a pastel color scheme and moderate complexity with interactive features. This card showcases work or products and supports dark mode.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
            <div class="mt-4 flex space-x-2">
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
                <a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
            </div>
        </div>
    </div>
</div>

Cards Component

A responsive blog/content card component designed with skeuomorphic style and earth tones. Includes a title, an image, a brief description, and an avatar for author information. Supports dark mode.

Open Preview

                <div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
    <div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
    </div>
    <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="text-gray-800 dark:text-gray-200">
            <p class="font-semibold">Author Name</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
        </div>
    </div>
</div>

Cards Component

Responsive cards component with microinteractions and dark theme support.

Open Preview

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Cards Component

A simple cards component designed in a skeuomorphic style, using an analogous color scheme for reading and content consumption. This component is responsive and supports dark theme.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>

Cards Component

A complex cards component designed for dark mode, suitable for blog and content consumption with a triadic color scheme.

Open Preview

                <div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 1, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
    <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
    <div class="flex justify-between items-center">
        <span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <div class="text-white">
            <h2 class="text-xl font-bold">Author Name</h2>
            <p class="text-gray-400">March 2, 2023</p>
        </div>
    </div>
    <img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
    <h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
    <p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
    <div class="flex justify-between items-center">
        <span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
        <button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
    </div>
</div>

3D Cards Component

A responsive card component with a 3D design style, vibrant colors, and multiple interactive elements, suitable for a dashboard. It supports dark mode using Tailwind's dark prefix.

Open Preview

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/200" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-red-600 text-white py-1 px-2 rounded-md">New</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description of the card content. It provides insight into the purpose of this card.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">John Doe</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/201" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-green-600 text-white py-1 px-2 rounded-md">Featured</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Insightful content about the card, detailing its functionalities and offerings.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Jane Smith</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-orange-600 text-white py-2 px-4 rounded-md hover:bg-orange-700 focus:outline-none">Explore</button>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
        <div class="relative">
            <img src="https://picsum.photos/400/202" alt="Card image" class="rounded-t-lg w-full">
            <div class="absolute top-2 left-2 bg-blue-600 text-white py-1 px-2 rounded-md">Popular</div>
        </div>
        <div class="p-4">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white">Card Title</h2>
            <p class="text-gray-600 dark:text-gray-300 mt-2">Information and interactive elements that are engaging and useful.</p>
            <div class="flex items-center mt-4">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
                <span class="ml-2 text-gray-700 dark:text-gray-300">Mark Johnson</span>
            </div>
        </div>
        <div class="px-4 py-2 border-t dark:border-gray-700">
            <button class="bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none">Learn More</button>
        </div>
    </div>
</div>

E-commerce Card

Responsive E-commerce Card Component with Dark Mode Support using Tailwind CSS and Material Design principles. Features a vibrant color scheme with moderate complexity including interactive elements like buttons and hover effects. Uses grid-based layout and incorporates shadows for depth.

Open Preview

                <div class="dark:bg-gray-800 dark:text-white p-4 rounded-lg shadow-lg grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="relative"> <img class="w-full h-48 object-cover rounded" src="https://picsum.photos/seed/picsum/400/300" alt="Product Image"> <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> -20% </div> </div> <div class="flex flex-col justify-between"> <div> <h3 class="text-xl font-bold dark:text-white">Product Title</h3> <p class="text-gray-600 dark:text-gray-300">Short product description with vibrant accents.</p> <div class="flex items-center mt-2"> <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">$19.99</span> <span class="text-sm text-gray-500 line-through ml-2">$24.99</span> </div> </div> <div class="flex space-x-2 mt-4"> <button class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-800"> Add to Cart </button> <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded dark:bg-gray-600 dark:hover:bg-gray-700 dark:text-white"> Wishlist </button> </div> </div> </div>

Dark Mode Social Cards

A responsive card component styled for dark mode with earth tones, designed for social media interfaces.

Open Preview

                <div class="max-w-sm mx-auto p-4">
  <div class="bg-gray-800 rounded-lg shadow-lg dark:bg-gray-900">
    <img class="rounded-t-lg" src="https://picsum.photos/400/200" alt="Card image cap">
    <div class="p-4">
      <div class="flex items-center">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-4">
          <h2 class="text-lg font-bold text-gray-300 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
      </div>
      <p class="mt-2 text-gray-300 dark:text-gray-200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut libero et neque vehicula porta.
      </p>
      <div class="flex justify-between mt-4">
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Like</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Comment</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Share</button>
      </div>
    </div>
  </div>
</div>

Dark Mode Cards Component

A responsive cards component designed for Business/Corporate websites with a dark mode UI and grayscale color scheme, featuring moderate complexity and interactivity.

Open Preview

                <div class="flex flex-wrap justify-center p-5 bg-gray-900 dark:bg-gray-800">
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">John Doe</h2>
                    <p class="text-gray-400">@johndoe</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Business Strategy</h3>
            <p class="text-gray-300 mb-4">This card contains information about business strategies that can be utilized for enhancing corporate effectiveness.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Learn More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=2" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Jane Smith</h2>
                    <p class="text-gray-400">@janesmith</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Marketing Insights</h3>
            <p class="text-gray-300 mb-4">Insights and analytics on market trends that can help your business adapt and grow.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Discover More</a>
        </div>
    </div>
    <div class="max-w-xs m-4 bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=3" alt="Card Image">
        <div class="p-5">
            <div class="flex items-center mb-4">
                <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar">
                <div class="ml-4 text-white">
                    <h2 class="text-lg font-semibold">Mike Johnson</h2>
                    <p class="text-gray-400">@mikejohnson</p>
                </div>
            </div>
            <h3 class="text-xl font-bold text-white mb-2">Financial Planning</h3>
            <p class="text-gray-300 mb-4">Detailed financial planning services aimed at helping companies achieve their financial goals.</p>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-800 bg-white rounded-lg hover:bg-gray-200">Get Started</a>
        </div>
    </div>
</div>

Cards Component

Responsive Dark Mode Card Component for Portfolio with Pastel color scheme.

Open Preview

                <!-- ./ src/components/Card.astro -->

<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 m-4">
  <img class="w-full" src="https://picsum.photos/400/250" alt="Placeholder image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Card Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-pastel-pink rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag1</span>
    <span class="inline-block bg-pastel-green rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag2</span>
    <span class="inline-block bg-pastel-blue rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mb-2">#tag3</span>
  </div>
    <div class="flex items-center px-6 py-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user">
        <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 18, 2023</p>
        </div>
    </div>
</div>

<style>
  .bg-pastel-pink {
    background-color: #f9cdda;
  }
  .bg-pastel-green {
    background-color: #b2f2bb;
  }
  .bg-pastel-blue {
    background-color: #a7ccff;
  }
</style>

Categories