JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<template id="template-svg-checkbox"><svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
    <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
</template><template id="template-svg-icon-close"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
    <g fill="none" fill-rule="evenodd">
        <path d="M0 0h24v24H0z"/>
        <path fill="#4B566B" d="M25.828 7.572l-1.4-1.4L16 14.6 7.572 6.172l-1.4 1.4L14.6 16l-8.428 8.428 1.4 1.4L16 17.4l8.428 8.428 1.4-1.4L17.4 16z"/>
    </g>
</svg>
</template><template id="template-svg-mark-success"><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
    <path fill="#28C476" fill-rule="evenodd" d="M48 96C21.49 96 0 74.51 0 48S21.49 0 48 0s48 21.49 48 48-21.49 48-48 48zm14.103-63.884l-18.76 22.51-9.713-9.711a4.363 4.363 0 1 0-6.17 6.17l13.09 13.09a4.372 4.372 0 0 0 3.088 1.28c.065 0 .133 0 .199-.005a4.362 4.362 0 0 0 3.154-1.567L68.81 37.702a4.366 4.366 0 0 0-.559-6.147 4.368 4.368 0 0 0-6.148.561z"/>
</svg>
</template><template id="template-svg-mark-error"><svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
    <path fill="#F62156" fill-rule="evenodd" d="M48 96C21.49 96 0 74.51 0 48S21.49 0 48 0s48 21.49 48 48-21.49 48-48 48zm5.43-48l8.146-8.146a3.84 3.84 0 0 0-5.43-5.43L48 42.569l-8.146-8.145a3.84 3.84 0 1 0-5.43 5.43L42.569 48l-8.145 8.146a3.84 3.84 0 0 0 5.43 5.43L48 53.431l8.146 8.145a3.84 3.84 0 0 0 5.43-5.43L53.431 48z"/>
</svg>
</template><template id="template-svg-icon-sad"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <g fill="none" fill-rule="evenodd">
        <circle cx="100" cy="100" r="97" fill="#E4EAF0" fill-opacity=".308" stroke="#A9B6C6" stroke-width="6"/>
        <circle cx="135.5" cy="81.5" r="9.5" stroke="#A9B6C6" stroke-width="6"/>
        <circle cx="64.5" cy="81.5" r="9.5" stroke="#A9B6C6" stroke-width="6"/>
   ...