JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="do-as-cards" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0,0,320,340" preserveAspectRatio="xMidYMin">
   <defs>
      <g id="card1">
         <image xlink:href="http://s22.postimg.org/ekd89tb8x/image.png" x="-150" y="-100" width="300" height="200" clip-path="url(#cardClip)" />
         <use xlink:href="#cardShape" class="cardOutline" />
      </g>
      <g id="card2">
         <image xlink:href="http://s22.postimg.org/72zfguwc1/image.png" x="-150" y="-100" width="300" height="200" clip-path="url(#cardClip)" />
         <use xlink:href="#cardShape" class="cardOutline" />
      </g>
      <clipPath id="cardClip">
         <use xlink:href="#cardShape"/>
      </clipPath>
      <path id="cardShape" class="cardOutline" d="m -150,-60 c 0,-10 10,-20 20,-20 l260,0 c 10,0 20,10 20,20 l 0,120 c 0,10 -10,20 -20,20 l -260,0 c -10,0 -20,-10 -20,-20 l 0,-120 z"   />
   </defs>


  <use xlink:href="#card1" transform="translate(160,86)"/>
  <use xlink:href="#card2" transform="translate(160,255)"/>
</svg>

CSS

.cardFace {
	font-size: 600%; 
	font-weight: bold; 
	font-style: italic; 
	color: white; 
	stroke: black; 
	text-align:center; 
	vertical-align: middle;
}
.cardOutline {
	fill: url(#imgDo); /* INTEL blue */
	stroke-width: 4;
	stroke: #004280; /* INTEL dark blue */
}   

#as_path{
    fill: url(#imgAs); 
}