JSFiddle - React, Tailwind, and code Playground

HTML

<div class="captcha-chat">
        <div class="captcha-container media">
            <div class="media-body">
                
            </div>
            <div id="captcha">
                <div class="controls">
                    <input class="user-text btn-common" placeholder="ここに入力" type="text" />
                    <button class="validate btn-common">
                        画像とテキストが有ってるかチェック
                    </button>
                    <button class="refresh btn-common">
                        別の画像にする
                    </button>
                </div>
            </div>
            <p class="wrong info">画像と入力内容が合わないみたいです</p>
        </div>
    </div>
   <script>
        ;
    (function(window, document, $, undefined) {

        var possibleCharacters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        var defaults = {

            selector: "#captcha",
            text: null,
            randomText: true,
            randomColours: true,
            width: 244,
            height: 163,
            colour1: null,
            colour2: null,
            font: 'normal 40px "Comic Sans MS", cursive, sans-serif',
            onSuccess: function() {
                alert('Correct!');
            },
            onFailure: function() {
                alert('wrong!');
            }
        };

        var CAPTCHA = function(config) {

            var that = this;

            this._settings = $.extend({}, defaults, config || {});

            this._container = $(this._settings.selector);

            var canvasWrapper = $('<div>').prependTo(this._container);

            this._canvas = $('<canvas>').appendTo(canvasWrapper).attr("width", this._settings.width).attr("height", this._settings.height);

            this._input = this._container.find('.user-text').on('keypress.captcha', function(e) {
                if (e.which == 13) {
                    that.validate(that._input.val());
                }
            });

           ...

CSS

p.wrong {
        display: none;
    }
    
    p.wrong.shake {
        display: block;
    }
    
    p.wrong.shake {
        animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    @keyframes shake {
        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
        }
        20%,
        80% {
            transform: translate3d(1px, 0, 0);
        }
        30%,
        50%,
        70% {
            transform: translate3d(-2px, 0, 0);
        }
        40%,
        60% {
            transform: translate3d(2px, 0, 0);
        }
    }
    
    .controls img {
        height: 20px;
    }