TailWind Chat POC

<div class="w-full max-w-xs bg-white">
  
  
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    
    <div class="bg-scroll bg-top h-64 relative" style="background-image:url(https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg);">
      
    <span class="text-2xl absolute pin-b pin-r font-light text-right align-text-bottom text-white">
        Jonathan Reinink
      </span>
      
      
    </div>

  <div class="container">
    <div class="font-bold text-xl mb-2">
    
      
    </div>
    
    <div class="block mx-auto overflow-scroll h-64">
      
      <div class="flex flex-row flex-wrap content-start items-stretch justify-between">
        <div class="w-5/6 bg-green-light mx-2 my-2 px-2 py-2 rounded">
    <p class="text-grey-darker text-sm">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
      </div>
        
        <div class="w-5/6 bg-grey-light mx-2 my-2 rounded">
          <img class="rounded" src="https://media.giphy.com/media/l2R0c7Xc0YVwAjTtS/giphy.gif" />
        </div>
        
    <div class="w-5/6 bg-grey-light mx-2 my-2 px-2 py-2 rounded">
    <p class="text-grey-darker text-sm ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
      </div>
        
        <div class="w-6/6 bg-grey-light mx-2 my-2 px-2 py-2 rounded">
          <p class="text-sm text-grey-darker">
            ... 
          </p>
        </div>
        
        </div>
      
    </div>

      
       <!-- Two columns -->
<div class="flex">
  <div class="w-full">
  <div class="block text-sm font-bold mb-2">
    <div class="w-100 mx-2 my-2 px-2 py-2">
    <textarea class="transition focus:outline-0 border border-transparent focus:bg-white focus:border-grey-light placeholder-grey-darkest rounded bg-grey-lighter py-2 pr-4 pl-10 block w-full appearance-none leading-normal ds-input text-grey-darker ">
    </textarea>
      </div>
  </div>
    
    <p class="text-center text-grey text-xs">
    ©2018 Acme Corp. All rights reserved.
  </p>
  
</div>
  
    
 

</div>
    
    
    
  </div>

  

  
</div>