JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="image-fill-wrap">
  <article>
    <p>Nunc nulla. Pellentesque dapibus hendrerit tortor. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.</p>
    <img src="https://images.unsplash.com/photo-1431540015161-0bf868a2d407?dpr=1&auto=compress,format&fit=crop&w=1200&h=800&q=80&cs=tinysrgb&crop=" />
    <p>Cras ultricies mi eu turpis hendrerit fringilla. Etiam iaculis nunc ac metus. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Vivamus elementum semper nisi.</p>
    <p>In hac habitasse platea dictumst. Nam pretium turpis et arcu. Nullam cursus lacinia erat. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Duis lobortis massa imperdiet quam.</p>
  </article>
</div>

SCSS

//------------------------------------------------//
// Allows a nested image or block to pull out of 
// its parent to a fluid or fixed width.
//
// @param {mixed} $max-width
//
//--
@mixin independent-width-child($max-width: 100vw){
  position:     relative;
  max-width:    $max-width;
  width:        initial;
  left:         50%;
  right:        50%;
  margin-left:  -($max-width / 2);
  margin-right: -($max-width / 2);  
}


body{
  line-height: 1.4;
  color: #404040;
  background: #f9f9f9;
  font-family: monospace;
}

img{
  max-width: 100%;
}

.image-fill-wrap{
  overflow-x: hidden;
}

article{
  max-width: 600px;
  margin: 2em auto;
  padding: 0 1em;
  
  & > * + *{
    margin-top: 1em;
  }
  
  img{
    @include independent-width-child();
    
    @media screen and (min-width: 1000px){
      @include independent-width-child(1000px);
    }
    
  }

}

JavaScript

/**
 * @independent-width-child - SASS mixin
 */