JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<div class="pattern">
<div class="stitch-row">
<div class="stitch">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<g>
    <g>
        <path class="background" d="M14.001,29.583c-0.125,0-0.25-0.047-0.344-0.138L0.74,17.195c-0.1-0.094-0.156-0.226-0.156-0.362V1
            c0-0.207,0.127-0.392,0.319-0.466C0.962,0.512,1.023,0.5,1.084,0.5c0.138,0,0.273,0.057,0.37,0.163l12.833,14.083
            c0.083,0.091,0.129,0.21,0.13,0.334l0.083,14c0.001,0.2-0.117,0.382-0.301,0.462C14.135,29.57,14.068,29.583,14.001,29.583z"/>
        <path fill="#CDCCCC" d="M1.084,1l12.833,14.083l0.083,14L1.083,16.833L1.084,1 M1.084,0C0.962,0,0.84,0.022,0.723,0.067
            C0.338,0.216,0.084,0.587,0.084,1v15.833c0,0.274,0.113,0.537,0.312,0.726l12.917,12.25c0.189,0.181,0.437,0.274,0.688,0.274
            c0.134,0,0.27-0.026,0.397-0.083c0.368-0.159,0.605-0.521,0.603-0.923l-0.083-14c-0.001-0.247-0.094-0.485-0.261-0.667
            L1.824,0.327C1.63,0.114,1.36,0,1.084,0L1.084,0z"/>
    </g>
    <g>
        <path class="background" d="M16.084,29.583c-0.066,0-0.135-0.015-0.199-0.041c-0.184-0.08-0.302-0.262-0.301-0.462l0.083-14
            c0.001-0.124,0.047-0.243,0.13-0.334L28.63,0.663C28.727,0.557,28.861,0.5,29,0.5c0.061,0,0.122,0.011,0.182,0.034
            C29.373,0.609,29.5,0.794,29.5,1v15.833c0,0.138-0.057,0.269-0.156,0.362l-12.917,12.25
            C16.333,29.536,16.209,29.583,16.084,29.583z"/>
        <path fill="#CDCCCC" d="M29,1v15.833l-12.917,12.25l0.083-14L29,1 M29,0c-0.275,0-0.546,0.114-0.739,0.327L15.427,14.41
            c-0.167,0.183-0.259,0.42-0.261,0.667l-0.083,14c-0.002,0.401,0.235,0.764,0.603,0.923c0.128,0.057,0.263,0.083,0.397,0.083
            c0.251,0,0.499-0.095,0.688-0.274l12.916-12.25C29.887,17.37,30,17.107,30,16.833V1c0-0.413-0.254-0.783-0.639-0.933
           ...

CSS

.stitch {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 1px 0 0;
    padding: 0;
}

.background {
    fill: #f2f1f0;
}
.stitch:hover .background {
    fill: #fce57e;
}

.stitch-row {
    position: relative;
    float: left;
    height: 30px;
    clear: left;
    overflow: hidden;
    margin-top: -10px;
}
.pattern {
    position: relative;
    margin-top: 20px;
}