JSFiddle - React, Tailwind, and code Playground

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...

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;
  padding: 0 16px;
}

header {
  display: flex;
  margin: 16px 0;
  justify-content:space-between;
  flex-direction: row;
  width: 100%;
}

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__hero-title {
  color: black;
  grid-area: title;
  display: flex;
  flex-direction: column;
}

.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: url('https://images.unsplash.com/photo-1456806064978-9934628b16fa?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  xbackground-image: url('https://images.unsplash.com/photo-1494707924465-e1426acb48cb?auto=format&fit=crop&w=2100&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  xbackground-image: url('https://images.unsplash.com/photo-1449628275652-6a7d8df8951b?auto=format&fit=crop&w=2100&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
  background-position: right 0 bottom 0px;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  margin: 0px;
}

.card__hero-title {
  background: inherit;
  background-position:...