JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<section  class="resource">
   <div> 
       <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

      <img src="http://davidrhysthomas.co.uk/img/dexter.png" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>

<section  class="resource">
   <div> 
       <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

      <img src="http://davidrhysthomas.co.uk/linked/astrid_avatar.png" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>
<section  class="resource">
   <div> 
       <a href="http://localhost/dov1/?custom_type=logo-design" rel="bookmark" title=" Logo Design">Logo Design</a>
  </div>
</section>

<section  class="resource">
  <div> 
        <a href="http://localhost/dov1/?custom_type=test" rel="bookmark" title=" Magazine Spread">Magazine Spread</a>

      <img src="http://davidrhysthomas.co.uk/img/drPooh.jpg" class="attachment-post-thumbnail wp-post-image" alt="project2_web" title="project2_web" />     
 </div>
</section>

CSS

div {
    border: 5px solid #f90;
    margin: 0 auto 1em auto;
    width: 50%;
    min-width: 30em;
    padding: 2em;
}

JavaScript

$('section img').each(
    function(){
        var src = this.src,
            h = $(this).height(),
            w = $(this).width();
        $(this).closest('div').css({
            'min-width' : w,
            'min-height' : h,
            'background-image' : 'url(' + src + ')',
            'background-repeat' : 'no-repeat',
            'background-position' : '50% 50%'
        });
    }).remove();