JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-wrapper" style="background-image:url('http://magic326.net/wp-content/uploads/2016/09/white-shirt.jpg')">
  <div class="logo-inside-image">
    <img src="http://www.stanfordhotels.com/wp-content/uploads/2013/08/Hltn-Waikiki-Beach-logo_clr_print.jpg" alt="">
  </div>
  <div class="text-inside-image">
    
  </div>
</div>

<div class="logos">
  <ul>
    <li>
    <a href="#">
            <img src="http://www.freepngimg.com/download/puma_logo/1-2-puma-logo-transparent.png" alt="">
    </a>
    </li>
    <li>
    <a href="#">
      <img src="https://static1.squarespace.com/static/538cfec3e4b0f4bbdccad3b8/t/53974cf5e4b0039937edb405/1402424565722/Pluma.png?format=500w" alt="">

    </a>
    </li>
    <li>
     <a href="#">
        <img src="http://charthousewaikiki.com/wp-content/uploads/2014/01/Chart-House-Waikiki-Blue-Logo.png" alt="">
     </a>
    </li>
  </ul>
  <input type="text" class="user-input" placeholder="Type a text...">
</div>
  

</div>

CSS

ul {
  padding:0;
}

img {
    max-width: 100%;
    height: auto;
}

li {
  list-style: none;
}

.wrapper {
  position: relative;
}

.logo-inside-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

.text-inside-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 100px;
    text-align: center;
    font-size: 22px;
    word-wrap: break-word;
}

.image-wrapper {
    background-size: 300px;
    height: 300px;
    width: 300px;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    float: left;
}


.logos {
  float: left;
}

.logos li {
width: 80px;
border: 1px solid lightgrey;
height: 68px;
float: left;
margin-right: 10px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}

JavaScript

$(document).ready(function() {
  $(".logos a").on("click", function(){
    var srcAttribute = $(this).find("img").attr("src");
    $(".logo-inside-image img").attr('src',srcAttribute);
  });
  
  $(".user-input").on("keyup", function(){
    var thisInputValue = $(this).val();
    if(thisInputValue.length > 0) {
     $(".text-inside-image").text(thisInputValue);
     $(".logo-inside-image img").attr('src',"");
    }
    else {
     $(".logo-inside-image img").attr('src', "http://www.stanfordhotels.com/wp-content/uploads/2013/08/Hltn-Waikiki-Beach-logo_clr_print.jpg");
    }
   
  });
  
});