JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div id="sections">

  <div class="section current">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 200">
      <path d="M86.6 0l86.6 50v100l-86.6 50L0 150V50z" />
    </svg>
    <h3>Brochure</h3>
    <h4>
    Reimagining Risk Adjustment
  </h4>
  </div>

  <div class="section">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 200">
      <path d="M86.6 0l86.6 50v100l-86.6 50L0 150V50z" />
    </svg>
    <h3>Whitepaper</h3>
    <h4>
    Solving Practical Problems with Healthcare Analytics
  </h4>
  </div>

</div>

CSS

body {
  background: white;
  font-family: "Montserrat-Light";
}

#sections {
  display: flex;
}

.section {
  position: relative;
  height: 350px;
  width: 300px;
  text-align: center;
}

.section svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section svg path {
  fill: none;
  stroke-width: 1px;
  stroke: #f2f2f2;
}

.section.current svg path {
  fill: #3AA6DA;
}

.section h3 {
  margin-top: 30%;
  font-size: 24px;
  color: #5aba27;
  text-transform: uppercase;
  font-weight: normal;
  width: 67%;
  margin-left: auto;
  margin-right: auto;
}

.section h4 {
  font-size: 18px;
  color: #5f5f5f;
  font-weight: normal;
  width: 67%;
  margin-left: auto;
  margin-right: auto;
}

.section.current h3,
.section.current h4 {
  color: #fff;
}