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>
    <pattern id="imgDo" y="0" x="0" width="1" height="1" >
        <image xlink:href="http://s22.postimg.org/ekd89tb8x/image.png" x="0" y="-75" width="300" height="300" />
    </pattern>
     <pattern id="imgAs" y="0" x="0" width="1" height="1" >
        <image xlink:href="http://s22.postimg.org/72zfguwc1/image.png" x="0" y="-75" width="300" height="300" />
    </pattern>
</defs>
 <g transform="translate(160,86)">
  
  <g id="doCard" class="animatedCard" transform="matrix(1 0 0 1 0 0)" onclick="spin()">     
    <path 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"   />
      <foreignObject id="do" class="cardFace" x="-120" y="-60" width="240" height="120"></foreignObject>
      </g>
 </g>
    


 <g transform="translate(160,253)">
  <g id="asCard" class="animatedCard" transform="matrix(1 0 0 1 0 0)" onclick="spin()">
   <path class="cardOutline" id="as_path" 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"/>
   <foreignObject id="as" class="cardFace" x="-120" y="-60" width="240" height="120"></foreignObject>
        </g>
 </g>

</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); 
}