JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://risibank.fr/downloads/web-api/risibank.js"></script>

<div class="container">

    <!-- PlaceHolder for the integration -->
    <div id="risibank-container"></div>

    <!-- TextArea holding images -->
    <textarea id="the-textarea"></textarea>
</div>

CSS

.container {
    width: 600px;
    text-align: center;
}

#risibank-container {
    width: 100%;
    height: 245px;
}

textarea {
    width: 100%;
    height: 80px;
}

JavaScript

RisiBank.activate({

    /**
     * Type of integration to use.
     * Currently only the iframe is supported.
     *  iframe: Embedded iframe (default)
     *  overlay: Opens a full-page overlay
     *  modal: Opens a small modal at the specified position
     * @type {undefined|'iframe'|'overlay'|'modal'}
     */
    type: 'iframe',

    /**
     * MUST BE SET IF type == 'iframe'
     * Query selector for the iframe container, or HTML Element being the iframe container.
     * @type {undefined|string|HTMLElement}
     */
    container: '#risibank-container',

    /**
     * MUST BE SET IF type == 'modal'
     * Position where to show the modal
     * @type {undefined|{ x: number, y: number }}
     */
    openPosition: undefined,
    
    /**
     * Theme to use for the embed
     * @type {undefined|'light'|'dark'|'light-old'}
     */
    theme: 'light',
    
    /**
     * Media size in the embed. Default is md.
     * @type {'sm'|'md'|'lg'}
     */
    mediaSize: 'sm',
    
    /**
     * Bottom navigation navbar size. Default is md.
     * @type {'sm'|'md'|'lg'}
     */
    navbarSize: 'sm',
    
    /**
     * Default tab to show. If chosing a non-existent tab, will show the most popular.
     * @type {'search' | 'fav' | 'hot' | 'top' | 'new' | 'rand'}
     */
    defaultTab: 'top',
    
    /**
     * Whether to show NSFW content. Default is to show it.
     * @type {Boolean}
     */
    showNSFW: false,
    
    /**
     * Whether to allow username selection in the embed.
     * If set to yes
     *  - Users will be able to select an username within the embed.
     * 	- The selected username will be automatically storred by this object using the LocalStorage API.
     * 	- The public collections of the selected user will be shown in the embed.
     * If set to no, it will not be possible to select an user within the embed.
     * @type {Boolean|undefined}
     */
    allowUsernameSelection: true,
    
    /**
     * Whether to show a copy button below all...