JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="iMagick-example"> 
    
    <h2>ImageMagick watermark batch breakdown</h2>
    
    <span class="section">
        <span  data-info="<p>Resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. Mogrify overwrites the original image file, whereas, convert writes to a different image file.</p> <p>Note that in this instance, because we navigate to a secondary path, nothing is overwritten.</p>">mogrify</span>
    </span>  
    <span class="linebreak">\</span>
    <br /> 

    <span class="section">
        <span data-info="Defines destination path.">-path</span> <span data-info="This needs to be replaced with the desired destination path. You can get path to a folder or file by dragging it into the terminal">{path-to-destination}</span>  
        <span data-info='Resizes the image. Optional function. ">" is a flag that makes sure that images over 600px are resized to 600px.'>-resize</span> <span>600</span><span>">"</span>
    </span> 
    <span class="linebreak">\</span> 
    <br /> 

    <span class="section">
        <span data-info="Annotate the image with a graphic primitive">-draw</span> "
        <span>image</span>  
        <span>Over</span>  
        <span data-info="Location/Offset.">10,10</span>  
        <span>0,0</span> 
        '<span>{path-to-watermark}</span>' "
    </span> 
    <span class="linebreak">\</span> 
    <br /> 

    <span class="section">
        <span>-gravity</span> <span>SouthEast</span>  
        <span>-quality</span> <span data-info="Anything between: 0-100">90</span>  
        <span>-format</span>  <span>jpg</span>  <span>*</span>
    </span>

</div>

<div class="letMeTellYouSomething">
    
</div>

CSS

.iMagick-example {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.iMagick-example,
.letMeTellYouSomething {
    width: 400px;
    margin: 0 auto;
    padding: 15px;
    font-size: 13px;
    line-height: 25px;
    border: 2px solid #e1e1e1;
    background: #f9f9f9;
    border-radius: 10px;
    background-clip: padding-box;
    /* font-family: 'Source Code Pro'; */
    font-family:'Inconsolata';
    font-weight: normal;
}

.letMeTellYouSomething {
    margin-top: 20px;
}

.section {
    color: #fff;
    padding: 2px 4px 2px 7px;
    margin: 0px;
    border: 1px solid #3864aa;
    border-radius: 4px;
    background-clip: padding-box;
    background: #3864aa;
    background: -moz-linear-gradient(top, #3864aa 0%, #03377f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3864aa), color-stop(100%, #03377f));
    background: -webkit-linear-gradient(top, #3864aa 0%, #03377f 100%);
    background: -o-linear-gradient(top, #3864aa 0%, #03377f 100%);
    background: -ms-linear-gradient(top, #3864aa 0%, #03377f 100%);
    background: linear-gradient(to bottom, #3864aa 0%, #03377f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3864aa', endColorstr='#03377f', GradientType=0);
}
.section span {
    position: relative;
    padding: 2px 3px;
    margin: 0px 4px 0px 0px;
}
.section span:hover {
    background: #fff;
    color: #3864aa;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 4px 0px #444;
    box-shadow: 0px 0px 4px 0px #666;
    border-radius: 2px;
    background-clip: padding-box;
}

.linebreak {
    padding-left: 10px;
}

JavaScript

$(function(){
    
    var lmtys = $('.letMeTellYouSomething');
    
    $('.section > span').on("click", function() {

        var obj = $(this),
            info = obj.data('info');
        
        lmtys.html( '<h2>'+ obj.html() +'</h2>' + info );

    });


    $('.iMagick-example').on("dblclick", function() {
    
        alert('sadf');
    
    });
    
});