styled-components

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const StyledGenericCard = styled.div`
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .card-image {
    max-height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #e2e8f0;

    img {
      width: 100%;
      height: auto;
    }
  }

  .card-content {
    padding: 1.5rem;

    .brow-text {
      font-weight: 600;
      color: #4a5568;
    }

    .description {
      margin-top: 1rem;
    }

    .cta-button {
      margin-top: 1.5rem;
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 0.25rem;
      background-color: #4299e1;
      color: white;
      text-decoration: none;
      transition: background-color 0.3s;

      &:hover {
        background-color: #2c5282;
      }
    }

    .tag-list {
      list-style: none;
      padding: 0;
      margin-top: 1rem;

      li {
        display: inline-block;
        margin-right: 0.5rem;

        .tag-pill {
          padding: 0.5rem 1rem;
          border: 1px solid #cbd5e0;
          border-radius: 0.25rem;
          background-color: #f7fafc;
          color: #4a5568;
        }
      }
    }
  }
`;

const GenericCard = ({
  imageSrc,
  altText,
  browText,
  description,
  ctaLink,
  ctaText,
  tags,
}) => {
  return (
    <StyledGenericCard>
      {imageSrc && (
        <div className="card-image">
          <img src={imageSrc} alt={altText} />
        </div>
      )}
      <div className="card-content">
        {browText && <p className="brow-text">{browText}</p>}
        {description && <p className="description">{description}</p>}
        {ctaLink && ctaText && (
          <a href={ctaLink} className="cta-button">
            {ctaText}
          </a>
        )}
        {tags && (
          <ul className="tag-list">
            {tags.map((tag, index) => (
              <li key={index}>
                <div className="tag-pill">{tag}</div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </StyledGenericCard>
  );
};

GenericCard.propTypes = {
  imageSrc: PropTypes.string,
  altText: PropTypes.string,
  browText: PropTypes.string,
  description: PropTypes.string,
  ctaLink: PropTypes.string,
  ctaText: PropTypes.string,
  tags: PropTypes.arrayOf(PropTypes.string),
};

export default GenericCard;

TailwindCSS

import React from 'react';
import PropTypes from 'prop-types';

const GenericCard = ({
  imageSrc,
  altText,
  browText,
  description,
  ctaLink,
  ctaText,
  tags,
}) => {
  return (
    <div className="bg-white border border-gray-300 rounded overflow-hidden transition duration-300 hover:shadow-md">
      {imageSrc && (
        <div className="max-h-200 overflow-hidden border-b border-gray-300">
          <img src={imageSrc} alt={altText} className="w-full h-auto" />
        </div>
      )}
      <div className="p-6">
        {browText && <p className="font-semibold text-gray-700 mb-4">{browText}</p>}
        {description && <p className="mb-4">{description}</p>}
        {ctaLink && ctaText && (
          <a
            href={ctaLink}
            className="block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 transition duration-300"
          >
            {ctaText}
          </a>
        )}
        {tags && (
          <ul className="list-none mt-4">
            {tags.map((tag, index) => (
              <li key={index} className="inline-block mr-2">
                <div className="py-1 px-2 border border-gray-300 rounded bg-gray-100 text-gray-700">
                  {tag}
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

GenericCard.propTypes = {
  imageSrc: PropTypes.string,
  altText: PropTypes.string,
  browText: PropTypes.string,
  description: PropTypes.string,
  ctaLink: PropTypes.string,
  ctaText: PropTypes.string,
  tags: PropTypes.arrayOf(PropTypes.string),
};

export default GenericCard;