JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="#FFD700"/>
  
  <!-- Card Stack Effect -->
  <path d="M200 150 L600 150 L580 450 L180 450 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  <path d="M210 140 L610 140 L590 440 L190 440 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  <path d="M220 130 L620 130 L600 430 L200 430 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  
  <!-- Pokemon Logo Style Text -->
  <text x="400" y="80" font-family="Arial Black" font-size="48" text-anchor="middle" fill="#1A5DB0" stroke="#FDD001" stroke-width="2">
    SURGING SPARKS
  </text>
  
  <!-- Card Count -->
  <text x="400" y="280" font-family="Arial Black" font-size="72" text-anchor="middle" fill="#1A5DB0">
    199 CARDS
  </text>
  
  <!-- Percentage -->
  <text x="400" y="350" font-family="Arial Black" font-size="56" text-anchor="middle" fill="#FF4444">
    48% OF SET!
  </text>
  
  <!-- Additional Info -->
  <text x="400" y="520" font-family="Arial" font-size="36" text-anchor="middle" fill="#1A5DB0">
    HOLOS • REVERSE HOLOS • RARES
  </text>
  
  <!-- Master Set Helper -->
  <text x="400" y="560" font-family="Arial Black" font-size="32" text-anchor="middle" fill="#1A5DB0">
    MASTER SET HELPER BUNDLE
  </text>
</svg>

JavaScript

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <!-- Background -->
  <rect width="800" height="600" fill="#FFD700"/>
  
  <!-- Card Stack Effect -->
  <path d="M200 150 L600 150 L580 450 L180 450 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  <path d="M210 140 L610 140 L590 440 L190 440 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  <path d="M220 130 L620 130 L600 430 L200 430 Z" fill="#FFF" stroke="#000" stroke-width="3"/>
  
  <!-- Pokemon Logo Style Text -->
  <text x="400" y="80" font-family="Arial Black" font-size="48" text-anchor="middle" fill="#1A5DB0" stroke="#FDD001" stroke-width="2">
    SURGING SPARKS
  </text>
  
  <!-- Card Count -->
  <text x="400" y="280" font-family="Arial Black" font-size="72" text-anchor="middle" fill="#1A5DB0">
    199 CARDS
  </text>
  
  <!-- Percentage -->
  <text x="400" y="350" font-family="Arial Black" font-size="56" text-anchor="middle" fill="#FF4444">
    48% OF SET!
  </text>
  
  <!-- Additional Info -->
  <text x="400" y="520" font-family="Arial" font-size="36" text-anchor="middle" fill="#1A5DB0">
    HOLOS • REVERSE HOLOS • RARES
  </text>
  
  <!-- Master Set Helper -->
  <text x="400" y="560" font-family="Arial Black" font-size="32" text-anchor="middle" fill="#1A5DB0">
    MASTER SET HELPER BUNDLE
  </text>
</svg>