JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div class="imgDiv" style="padding-bottom:14.5px;padding-right:9.5px;float:left;">
  <img style="width:180px;height:180px;" src="https://i.imgur.com/luXGYCfb.jpg" id="luXGYCf" title="MRW I post the same photo of M..." class="favoriteImage" draggable="true">
  <div style="text-align: center;">
    <span class="viewImg" style="margin-right:10px;" postid="luXGYCf">View</span><span class="deleteImg">Delete</span></div>
</div>

CSS

.favoriteImage {
  cursor: pointer;
  border: 2px solid #434343;
}

JavaScript

var pressedTimes = 0;
        var maxWidth = 35;
        var maxHeight = 23;
        var percentageSensX =  70;
        var percentageSensY =  90;
        var heightPercentage = $(window).height()/100;
        var widthPercentage = $(window).width()/100;
        var Ls = $("img");
        var Ll = Ls.length;
        var styles = "<style>#settingsView {font-family: Arial,sans-serif;font-weight: 700;color: #fff;background: rgb(18, 18, 17);padding: .5em;position: absolute;z-index: 99999999;text-align:middle; }.box {border: solid 2px #2B2B2B;border-radius: 5px;padding: .2em; }.setting {display: table;background: rgb(26, 26, 26);margin: 0 auto;margin-bottom: 0.5em;margin-top: .5em;}lable {display: inline-block;float: left;clear: left;width: 3.5em;text-align: right;padding-right: 3px;margin-bottom: .4em;}.buttn{font-family: Arial,sans-serif;font-weight: 700;color: #fff;text-decoration: none;outline: 0 none;-webkit-user-select: none;user-select: none;cursor: pointer;display: inline-block;text-shadow: 1px 1px 1px rgba(0,0,0,.2);border-radius: 2px;font-size: 14px;font-size: 12px;padding: 8px 20px;background: #595959;background: linear-gradient(to bottom,#595959 0,#404040 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#404040', GradientType=0);border-top: 1px solid #737373;border-bottom: 1px solid #262626;border-left: 0;border-right: 0;}.buttn:active{background: #474747;background: linear-gradient(to bottom,#474747 0,#3d3d3d 100%);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#474747', endColorstr='#3d3d3d', GradientType=0);border-top: 1px solid #525252;border-bottom: 1px solid #212121;}.input{ display: inline-block; float: left;}#imageView_container {min-height: 5em;min-width: 5em;background: #272727;position: absolute;padding: .3em;z-index: 9999999; }#imageView_img {color: white;font-family: Helvetica, sans-serif; }</style>";

        console.log("Images grabbed = " + Ll);
        //Appends styles
      ...