JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<ul>
        <li>
            <div class="ripple_add">click</div>
        </li>
        <li class="ripple_area">
            <div contenteditable="true" class="txt1">
                You can type here. Add an icon.
            </div>
            <a href="javascript:openModal('modal1');">open</a>
            <div class="popup modal1">
                <a href="#none" class="close">
                    <img src="https://www.nurifunding.co.kr/img/new/main/btn_close_request.png">
                </a>
                <div class="contents-box">
                    <div class="custom-input">
                        <div class="selectable-icons selectableIcons">
                            <img src="http://i.stack.imgur.com/nO2hl.png" />
                            <img src="http://i.stack.imgur.com/IkjJW.png" />
                            <img src="http://i.stack.imgur.com/QrKSV.png" />
                            <img src="http://i.stack.imgur.com/sZpOK.png" />
                            <img src="http://i.stack.imgur.com/d7HIy.png" />
                            <img src="http://i.stack.imgur.com/iUDpH.png" />
                            <img src="http://i.stack.imgur.com/IjpTt.png" />
                            <img src="http://i.stack.imgur.com/rDCTA.png" />
                            <img src="http://i.stack.imgur.com/YtkL1.png" />
                            <img src="http://i.stack.imgur.com/wPXCd.png" />
                            <img src="http://i.stack.imgur.com/nO2hl.png" />
                            <img src="http://i.stack.imgur.com/IkjJW.png" />
                            <img src="http://i.stack.imgur.com/QrKSV.png" />
                            <img src="http://i.stack.imgur.com/sZpOK.png" />
                            <img src="http://i.stack.imgur.com/d7HIy.png" />
                            <img src="http://i.stack.imgur.com/iUDpH.png" />
                            <img...

CSS

ul,
        li {
            padding: 10px;
            list-style: none;
            display: block;
            background-color: #c8c8c8
        }

        li {
            border-bottom: 1px solid #333
        }

        [contenteditable] {
            border: 1px solid #c8c8c8;
            padding: 10px;
            line-height: 1.4em;
            -webkit-appearance: textfield;
            appearance: textfield;
            width: 100%;
            max-width: 700px;
            cursor: pointer;
            background-color: #fff;
        }

        img {
            vertical-align: top;
            max-height: 1.4em;
            max-width: 1.4em;
        }
        .selectableIcons {
            height:150px;
            overflow-y:scroll;
        }
        .selectableIcons img {
            cursor: pointer;
            padding:10px;
        }

        .ripple_area {
            position: relative;
        }

        .popup {
            border: 1px solid #ccc;
            background: #fff;
            padding: 20px;
            width: 300px;
            position: absolute;
            top: 42px;
            left: 0px;
            display: none;
            z-index:999999;
        }

        .popup .close {
            text-align:right;
            display:block;
            width:100%;
            margin-bottom:10px;
        }

JavaScript

function openModal(modalname) {
            document.get
            $("." + modalname).fadeIn(300);
        }

        $('.popup .close').click(function () {
            $(this).parent().fadeOut(300);
        });

        // ripple
        $('li.ripple_area').hide();
        $(".ripple_add").click(function () {
            $(this).parent().next().slideToggle(500);
        });

        // emoticon
        document.querySelector('.selectable-icons').addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() === 'img') {
                document.querySelector('.txt1').appendChild(e.target.cloneNode(true));
            }
        });
        document.querySelector('.selectable-icons2').addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() === 'img') {
                document.querySelector('.txt2').appendChild(e.target.cloneNode(true));
            }
        });
        document.querySelector('.selectable-icons3').addEventListener('click', function (e) {
            if (e.target.tagName.toLowerCase() === 'img') {
                document.querySelector('.txt3').appendChild(e.target.cloneNode(true));
            }
        });