JSFiddle - React, Tailwind, and code Playground

HTML

<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>

<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>

<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>

<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>
<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>
<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>
<div class='layout_theme'>
  <a class='icon'>
      <img class='example_two' />
  </a>
</div>
<div class='file_uploader'>
    FILE UPLOADER
</div>

CSS

div{
    width: 200px;
    height: 150px;
    background: #036;
    display: inline-block;
    margin: 15px;
}

.file_uploader{
    background: #333;
    position: absolute;
    top: -300px;
    left: -300px;
}

JavaScript

$(".layout_theme").click(function(){

    $(".file_uploader").animate({
        left: $(this).offset().left - parseInt($(this).css("margin-left")) + "px",
        top: $(this).offset().top + $(this).height() - parseInt($(this).css("margin-top")) + "px"
    }) 
});