JSFiddle - React, Tailwind, and code Playground

by vinodlouis

HTML

<div class="n-panel">
  <div class="noti">
    <div class="icon">
      <span>1</span>
    </div>
    <div class="text">
      <div class="main">
      Alum.csv uploaded
      </div>
      <div class="date">
        12th July, 2020
      </div>
    </div>
  </div>
</div>

CSS

.n-panel{
  background:red;
  padding:20px;
}

.noti{
  background:pink;
  padding:10px;
  border:1px solid blue;
  display:flex;
}

.icon > span{
  background:#999999;
  padding:5px 4px;
  border-radius:5px;
}

.text{
  flex:1;
  padding-left:10px;
}

.date{
  font-style:Italic;
  font-size:10px
}