Course Design Cards

Cards 1.1K

About

Here is Course Design Cards component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Course Design Cards to your project and fits it to your theme.

Code

How Course Design Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import Card from '@/components/ui/course-design-cards';
import '@/index.css'; 

const DefaultDemo: React.FC = () => {
  const cardData = [
    {
      id: 1,
      colorClass: 'green',
      date: 'Feb 2, 2021',
      title: 'web designing',
      description: 'Prototyping',
      progressPercent: '90%',
      progressValue: '90%',
      imgSrc1: 'https://cdn.21st.dev/assets/mirror/7f/7fd6c9c03ca80e37fe8b9d2c0a7bbcb0cfc0efb7ddfee804eae550721823b005.jpg',
      imgAlt1: 'User 1',
      imgSrc2: 'https://cdn.21st.dev/assets/mirror/fa/fa7717cc596a4e9f046857063a32bf2b02e92641715dee729e2193845a3c96c3.jpg',
      imgAlt2: 'User 2',
      countdownText: '2 days left',
    },
    {
      id: 2,
      colorClass: 'orange',
      date: 'Feb 05, 2021',
      title: 'mobile app',
      description: 'Shopping',
      progressPercent: '30%',
      progressValue: '30%',
      imgSrc1: 'https://cdn.21st.dev/assets/mirror/59/5911e3cc75c7ccb3d3aa8e030ddc10a7b1a1532d82cab7be99c3bbd83ded4abb.jpg',
      imgAlt1: 'User 3',
      imgSrc2: 'https://cdn.21st.dev/assets/mirror/f3/f30731edbee626b0eb8d9947a19135e4e3a40fe631d389dd56394eeb3a91aca1.jpg',
      imgAlt2: 'User 4',
      countdownText: '3 weeks left',
    },
    {
      id: 3,
      colorClass: 'red',
      date: 'March 03, 2021',
      title: 'dashboard',
      description: 'Medical',
      progressPercent: '50%',
      progressValue: '50%',
      imgSrc1: 'https://cdn.21st.dev/assets/mirror/6c/6c74ebf6a7ebba867538b0cd8825a794ea694b8139da9956cba027e7f5207434.jpg',
      imgAlt1: 'User 5',
      imgSrc2: 'https://cdn.21st.dev/assets/mirror/10/1015230f2eaf20e3d9619739b198b48c285fef16f1f0af2a55c576bd61a56673.jpg',
      imgAlt2: 'User 6',
      countdownText: '3 weeks left',
    },
    {
      id: 4,
      colorClass: 'blue',
      date: 'March 08, 2021',
      title: 'web designing',
      description: 'Wireframing',
      progressPercent: '20%',
      progressValue: '20%',
      imgSrc1: 'https://cdn.21st.dev/assets/mirror/fe/febd67023dbd4cf096b58a7280ae6ab72e1ac7a65af8703804d2e3456821c423.jpg',
      imgAlt1: 'Erik Longman',
      imgSrc2: 'https://cdn.21st.dev/assets/mirror/fe/fe20984132fd0a93863e766e8e7374e03b971cd8eb621d44772edb75aec35c0f.jpg',
      imgAlt2: 'Jane Doe',
      countdownText: '3 weeks left',
    },
  ];

  return (
    <section>
      {cardData.map((card) => (
        <Card key={card.id} data={card} />
      ))}
    </section>
  );
};

export default DefaultDemo;