JSFiddle - React, Tailwind, and code Playground

using card--wide switches to different mode

by mgoetzke

HTML

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<header>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M21.172 24l-7.387-7.387c-1.388.874-3.024 1.387-4.785 1.387-4.971 0-9-4.029-9-9s4.029-9 9-9 9 4.029 9 9c0 1.761-.514 3.398-1.387 4.785l7.387 7.387-2.828 2.828zm-12.172-8c3.859 0 7-3.14 7-7s-3.141-7-7-7-7 3.14-7 7 3.141 7 7 7z" />
  </svg>
  <svg height="24" viewBox="0 0 28 11" version="1.1" id="bizpin">
    <defs id="defs4490" />

    <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-17,-68)">
      <g id="biz">
        <path d="m 17.294624,76.639877 v -7.792805 h 0.718303 v 3.136759 q 0.454752,-0.558106 1.018025,-0.831991 0.563273,-0.279052 1.235067,-0.279052 1.193726,0 2.036051,0.868164 0.847494,0.862996 0.847494,2.098063 0,1.219564 -0.852661,2.08256 -0.852661,0.862996 -2.051555,0.862996 -0.687296,0 -1.245401,-0.294555 -0.558106,-0.294556 -0.98702,-0.883667 v 1.033528 z m 2.89388,-0.552937 q 0.604615,0 1.116211,-0.294556 0.511597,-0.299723 0.81132,-0.837158 0.304891,-0.537435 0.304891,-1.136882 0,-0.599446 -0.304891,-1.142049 -0.304891,-0.542602 -0.821655,-0.842326 -0.511597,-0.304891 -1.09554,-0.304891 -0.594279,0 -1.131714,0.304891 -0.532267,0.299724 -0.821655,0.81132 -0.284221,0.511597 -0.284221,1.152385 0,0.976684 0.640788,1.632975 0.645955,0.656291 1.586466,0.656291 z"
        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:6.61458302px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic';letter-spacing:0px;word-spacing:0px;" id="bizpin--b"
        inkscape:connector-curvature="0" />
        <path d="m 24.186193,68.702378 q 0.248047,0 0.423747,0.175699 0.175699,0.1757 0.175699,0.423747 0,0.242879 -0.175699,0.418579 -0.1757,0.1757 -0.423747,0.1757 -0.242879,0 -0.418579,-0.1757 -0.1757,-0.1757 -0.1757,-0.418579 0,-0.248047 0.1757,-0.423747...

CSS

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Lato", "Trebuchet MS"
}

body {
  width: 100%;
  height: 100%;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-items: center;
  position: relative;
}

body > * {
  margin-left: 16px;
  margin-right: 16px;
}

header {
  display: flex;
  margin-top: 16px;
  margin-bottom: 16px;
  justify-content: space-between;
  flex-direction: row;
}


header > svg {
  fill: #777;
}

.card {
  overflow: hidden;
  position: relative;
  box-shadow: 1px 1px 7px 2px #00000040;
  border-radius: 10px;
  min-height: 300px;
  height: 50%;
  background: white;
}

.card {
  display: grid;
  grid-gap: 4px;
  grid-auto-columns: 1fr;
  grid-auto-rows: 2fr min-content;
  grid-template-areas: "top" "title"
}

.card.card--wide {
  border-radius:0px;
  margin-left:0;
  margin-right:0;
  box-shadow:none;
}

.card.card--wide:after {
  content:'';
  pointer-events:none;
  position:absolute;
  top:0;
  left:0;
  right:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 64%); 
  height: 16px;
}

.card > .card__hero-title {
  color: black;
  grid-area: title;
  display: flex;
  flex-direction: column;
}

.card.card--wide > .card__hero-title:after {
  content:'';
  pointer-events:none;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background: linear-gradient(to top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 64%); 
  height: 32px;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.card * {
  z-index: 0;
}

.card__hero.card__hero-dark {
  color: black;
}

.card.card__hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://lh5.googleusercontent.com/p/AF1QipPLV3lW1q7MmaQB1QYzHETUh20p6XgDgzBc9Z3x=w392-h261-k-no');
  background-image: url('https://images.unsplash.com/photo-1470138831303-3e77dd49163e?auto=format&fit=crop&w=2100&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  background-image:...