JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<html>
<head>
</head>
<body>
<div class="outerdiv">
<div class="header_section">
IED details
</div>
<ul>
<li style=""><label>Name : </label><p>IED</p>
</li>
<li style=""><label>Name : </label><p>IED 454677JKJNKJ</p>
</li>
<li style=""><label>Name : </label><p>bdhjsrfbvgkjsdbfjasndbjfbdjasbfjasdbjfvabldsbflavgs</p>
</li>
<li style=""><label>Name : </label><p>bdhjsrfbvgkjsdbfjasndbjfbdjasbfjasdbjfvabldsbflavgs</p>
</li>
<li style=""><label>Name : </label><p>bdhjsrfbvgkjsdbfjasndbjfbdjasbfjasdbjfvabldsbflavgs</p>
</li>

</ul>
</div>
</body>
</html>

CSS

.outerdiv{
  background:rgba(255,255,255,0.8);border-radius:4px;
  overflow:hidden;
}
.header_section{
  background:#3dcd58;border-radius:4px 4px 0 0;font-size:18px;padding:15px 0 15px 15px;color:#fff;font-weight:bold;
 font-size:50px;
}
.outerdiv ul{
  list-style:none;padding:8px;margin:0;
}
.outerdiv ul li{
  overflow:hidden;
x solid #999999;padding:10px;
}
.outerdiv ul li label{
float:left;
  font-size:50px;
  margin:0;color:#999;font-weight:bold;
}
.outerdiv ul li p{
    border: none;
    font-size:50px;
    outline: none;
display:inline-block;
    float: left;
    margin: 0;
    color:#333;
        word-break: break-all;
    background: none;
}