<div class="app min-h-screen font-sans bg-indigo-darkest min-h-screen pt-8 p-4">
    
    <h3 class="text-indigo-lightest text-center mt-0 mb-8">News Badges</h3>
    
    <div class="content mx-auto">
      
    
      <div class="news mx-auto rounded-full bg-indigo-darker w-full flex items-center">
        <span class="bg-green-dark text-white tracking-wide text-xs w-auto m-2 inline-block rounded-full py-1 px-2">NEW</span>
        <span class="txt w-2/3 sm:w-full text-white text-sm text-indigo-lightest">Big news ipsum dolor sit amet consectetur</span>
      </div>
    
      
      <hr class="border-b border-indigo-darker my-8">
      
      
      <div class="news bg-indigo-darker text-white flex items-center mx-auto rounded-full">
        <span class="bg-green-dark tracking-wide text-xs w-auto m-1 inline-block rounded-full py-1 px-2">NEW</span>
        <span class="txt w-2/3 sm:w-full text-sm text-indigo-lightest">Small News ipsum dolor sit amet consectetur</span>
      </div>
      
      
    </div>
    
  </div>

.content{
  max-width: 400px;
}
.news span.txt{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

External CSS

  1. https://unpkg.com/tailwindcss@0.7.4/dist/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.