react-icons/md#MdCheckBox JavaScript Examples

The following examples show how to use react-icons/md#MdCheckBox. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Checkbox.js    From airdnd-frontend with MIT License 6 votes vote down vote up 
StCheckBox = styled(MdCheckBox)`
  font-size: 3.3rem;
  min-width: 3.3rem;
  min-height: 3.3rem;
  ${({ map }) =>
    map &&
    css`
      font-size: 3.3rem;
    `}
`
Example #2
Source File: pricing.js    From strapi-starter-next-corporate with MIT License 5 votes vote down vote up 
Pricing = ({ data }) => {
  return (
    <div className="container py-12">
      <h1 className="text-4xl text-center">{data.title}</h1>
      <div className="flex flex-col lg:flex-row gap-4 lg:justify-center mt-6">
        {data.plans.map((plan) => (
          <div
            className={classNames(
              // Common classes
              "rounded-md border-2 py-4 px-4 flex-1 md:w-lg",
              // Normal plan
              {
                "bg-gray-100 text-gray-900 border-gray-300":
                  !plan.isRecommended,
              },
              // Recommended plan
              {
                "bg-primary-100 text-primary-900 border-primary-300":
                  plan.isRecommended,
              }
            )}
            key={plan.id}
          >
            <h2 className="text-2xl">{plan.name}</h2>
            <p
              className={classNames("mt-4 text-lg", {
                "text-primary-700": plan.isRecommended,
                "text-gray-700": !plan.isRecommended,
              })}
            >
              {plan.description}
            </p>
            <p className="text-3xl mt-4">
              {plan.price === 0 ? "Free " : `$${plan.price} `}
              <span className="text-base font-medium">{plan.pricePeriod}</span>
            </p>
            <ul className="mt-4 flex flex-col gap-3">
              {plan.features.map((feature) => (
                <li
                  className="flex flex-row justify-between items-center"
                  key={feature.id}
                >
                  <span>{feature.name}</span>
                  <MdCheckBox className="h-6 w-auto text-gray-900" />
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  )
}