JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html lang="ko"> 
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <link rel="stylesheet" href="http://www.josscrowcroft.com/demos/motioncaptcha/motionCaptcha.demo.css" />
    <style type="text/css">
   
     /**
     * jQuery MotionCAPTCHA Plugin CSS
     * josscrowcroft.com/projects/motioncaptcha-jquery-plugin/
     * 
     * Only these rules are absolutely necessary for the plugin.
     * NB. The width & height of the canvas can be flexible to fit your layout but there's a recommended min/max
     * - if you need it much bigger/smaller, you could tweak the background-positions of the shape classes.

     <l ink rel="stylesheet" href="http://www.josscrowcroft.com/demos/motioncaptcha/MotionCAPTCHA/jquery.motionCaptcha.0.2.css" />
     */

    /* The canvas: */
    #mc-canvas {
        width:220px;  /* For best results, set width to between 210px and 240px */
        height:154px; /* For best results, set height to between 140px and 170px */
        background:#fff -9999px -9999px no-repeat;
        /* 사용자 템플릿 추가 시 템플릿 이미지를 추가해 재 생성한다. */
        background-image: url('http://www.josscrowcroft.com/demos/motioncaptcha/MotionCAPTCHA/motionCaptcha-shapes.jpg') !important;
    }

    /* The shapes: */
    #mc-canvas.triangle     { background-position:  10px   10px }
    #mc-canvas.x            { background-position:-200px   10px }
    #mc-canvas.rectangle    { background-position:-400px   10px }
    #mc-canvas.circle       { background-position:-600px   10px }
    #mc-canvas.check        { background-position:  10px -150px }
    #mc-canvas.caret        { background-position:-200px -150px }
    #mc-canvas.zigzag       { background-position:-400px -150px }
    #mc-canvas.arrow        { background-position:-600px -150px }
    #mc-canvas.leftbracket  { background-position:  10px -300px }
    #mc-canvas.rightbracket { background-position:-200px -300px }
    #mc-canvas.v            {...