JSFiddle - React, Tailwind, and code Playground

by tomsx

HTML

<div class="content-box-header" style="height:85px; width:350px;left:10px">
    <div class="title">This is a heading.</div>
    <div class="content">Hello</div>
</div>

CSS

.content-box-header .content {
    height:inherit;
    padding: 10px;
    font-size: 15px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    border:2px solid #D6E6F2;
    background-color: #F4F8F9;

    
}
.content-box-header .title {   
    height:4px;
    line-height:4px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background:#D6E6F2;
    background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 63%, rgba(200,215,220,1) 100%); 
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 63%,rgba(200,215,220,1) 100%); 
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 63%,rgba(200,215,220,1) 100%); 

    color: black;
    font-size:14px;
    font-weight:bold;    
    font-family: "Segoe UI", Helvetica, "Helvetica Neue", Arial, sans-serif;
    display:block;
    padding:10px;
    border: 1px solid #D6E6F2;
    border-bottom:none;
}

.content-box-header {
   z-index:-1;
   position: absolute;
   height:90px;
}