JSFiddle - React, Tailwind, and code Playground

by mannemvamsi

HTML

<div class="panel" data-type="new">
 <img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?fit=crop&fm=jpg&h=725&ixlib=rb-0.3.5&q=80&w=1300">
</div>
    
    <div class="panel" data-type="trending">
 <img src="https://images.unsplash.com/photo-1443926818681-717d074a57af?fit=crop&fm=jpg&h=725&ixlib=rb-0.3.5&q=80&w=1300">
</div>

CSS

img {
    width:100%; border-radius:3px;
}
.panel {
    margin-top:50px;
    margin-left:30px;
  position: relative;
  display: inline-block;
  width:350px;
   
}

  .panel:after {
    content: attr(data-type);
    z-index: 99999;
    color:#ff6600;
    display: block;
    top:1px;
    right:1px;
    padding:3px 5px;
    border-radius:3px;
    background: white;
    position: absolute;
  }