diff --git a/landing/competitor-feature-card.css b/landing/competitor-feature-card.css
new file mode 100644
--- /dev/null
+++ b/landing/competitor-feature-card.css
@@ -0,0 +1,56 @@
+.container {
+  max-width: 432px;
+  background-color: var(--comparison-cards);
+  padding: 32px;
+  border-radius: 16px;
+}
+
+.container:hover {
+  cursor: pointer;
+  background-color: var(--comparison-cards-hovered);
+}
+
+.headingContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.headingText {
+  color: var(--white-100);
+}
+
+.comingSoonBadge {
+  background-color: var(--badge);
+  padding: 5px 10px;
+  border-radius: 16px;
+}
+
+.comingSoonText {
+  color: var(--white-100);
+  margin-left: 8px;
+}
+
+.comingSoonIcon {
+  color: var(--coming-soon-icon);
+}
+
+hr {
+  margin: 24px 0;
+  border-radius: 8px;
+  height: 1.5px;
+  background-color: var(--black-80);
+  border: none;
+}
+
+.descriptionText {
+  color: var(--white-80);
+  height: 80px;
+  margin-top: 8px;
+}
+
+.readMoreText {
+  color: var(--violet-dark-100);
+  margin-top: 16px;
+}
diff --git a/landing/competitor-feature-card.react.js b/landing/competitor-feature-card.react.js
new file mode 100644
--- /dev/null
+++ b/landing/competitor-feature-card.react.js
@@ -0,0 +1,77 @@
+// @flow
+
+import { faWrench } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import * as React from 'react';
+
+import CommLogo from './assets/comm-logo.react.js';
+import type { Competitors } from './competitor-data.js';
+import css from './competitor-feature-card.css';
+import CompetitorLogo from './competitor-logo.react.js';
+import typography from './typography.css';
+
+type Props = {
+  +competitorID: Competitors,
+  +title: string,
+  +comingSoon: boolean,
+  +competitorDescription: string,
+  +commDescription: string,
+  +onClick: () => mixed,
+};
+
+function CompetitorFeatureCard(props: Props): React.Node {
+  const {
+    competitorID,
+    title,
+    comingSoon,
+    competitorDescription,
+    commDescription,
+    onClick,
+  } = props;
+
+  const headingClassName = classNames([typography.heading3, css.headingText]);
+  const comingSoonClassName = classNames([
+    typography.paragraph3,
+    css.comingSoonText,
+  ]);
+  const descriptionClassName = classNames([
+    typography.paragraph1,
+    css.descriptionText,
+  ]);
+  const readMoreClassName = classNames([
+    typography.paragraph2,
+    css.readMoreText,
+  ]);
+
+  let comingSoonBadge;
+  if (comingSoon) {
+    comingSoonBadge = (
+      <div className={css.comingSoonBadge}>
+        <FontAwesomeIcon
+          size="sm"
+          className={css.comingSoonIcon}
+          icon={faWrench}
+        />
+        <span className={comingSoonClassName}>Coming Soon</span>
+      </div>
+    );
+  }
+
+  return (
+    <a className={css.container} onClick={onClick}>
+      <div className={css.headingContainer}>
+        <p className={headingClassName}>{title}</p>
+        {comingSoonBadge}
+      </div>
+      <CompetitorLogo name={competitorID} size={30} />
+      <p className={descriptionClassName}>{competitorDescription}</p>
+      <hr />
+      <CommLogo size={30} />
+      <p className={descriptionClassName}>{commDescription}</p>
+      <p className={readMoreClassName}>Read more</p>
+    </a>
+  );
+}
+
+export default CompetitorFeatureCard;
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -40,6 +40,9 @@
   --page-background: #111111;
   --light-dark-page-background: #1a1a1a;
   --comparison-cards: #18181a;
+  --comparison-cards-hovered: #1c1c1f;
+  --coming-soon-icon: #dca008;
+  --badge: #ebebeb14;
 }
 
 /* ===== GENERAL PAGE STYLES ===== */