JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="xs-col-12">
<svg:svg version="1.1 " viewBox="0 0 424.2 454.55 " preserveAspectRatio="xMinYMin meet " xmlns:svg="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink ">
<svg version="1.1" viewBox="0 0 424.2 454.55" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Go Board Surface</title>
<defs>
<filter id="woodGrain">
<feTurbulence type="turbulence" baseFrequency="0.16,0.0008" numOctaves="1" result="noise2" seed="3" stitchTiles="stitch" />
<feColorMatrix in="noise2" type="matrix" values="-0.2126 -0.7152 -0.0722 0 0
-0.2126 -0.7152 -0.0722 0 0
-0.2126 -0.7152 -0.0722 0 0
0 0 0 0.2 0" result="tint2" />
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="4" result="noise3" seed="76543" stitchTiles="stitch" />
<feDisplacementMap in="tint2" in2="noise3" scale="12.5" xChannelSelector="R" yChannelSelector="G" result="grainy" />
<feMerge result="basicGrain">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="grainy" />
</feMerge>
</filter>
<pattern id="grid-horizontal-lines" x="13.6" y="13.45" width="22" height="23.7" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<line x1="0" y1="0.5" x2="22" y2="0.5" stroke="black" stroke-width="1" />
</pattern>
<pattern id="grid-vertical-lines" x="13.6" y="13.45" width="22" height="23.7" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<line x1="0.5" y1="0" x2="0.5" y2="23.7" stroke="black" stroke-width="1" />
</pattern>
<g id="star">
...